Bootstrap contextual classes

The bootstrap is all about defined classes,that we can use in our HTML template to beautify it without much hard work.So here in this series we will discuss about Bootstrap contextual classes.The contextual classes are the classes defined by bootstrap design team to indicate about some context.

Bootstrap contextual classes :-

  • .success >> Indicates a successful or positive action
  • .info >> Indicates a neutral informative change or action
  • .warning >> Indicates a warning that might need attention
  • .danger >> Indicates a dangerous or potentially negative action

These contextual classes can be used throughout the HTML template with many HTML elements.

For example in button elements :-


<button type="button" class="btn btn-success">Success</button> <br>
<button type="button" class="btn btn-info">Info</button> <br>
<button type="button" class="btn btn-warning">Warning</button> <br>
<button type="button" class="btn btn-danger">Danger</button> <br>

For Table elements:


<table class="table">


<tr class="success">
<td>Sucess Class</td>
</tr>

 

<tr class="info">
<td>info Class</td>
</tr>

 

<tr class="warning">
<td>warningClass</td>
</tr>

 

<tr class="danger">
<td>dangerClass</td>
</tr>

 
 </table>

Sucess Class
info Class
warningClass
dangerClass

Or even in background color:-


<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

How to make youtube video responsive ?

<style>
.videoResponsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
 
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="videoResponsive">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/8A6dW264sXM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

How to make table responsive

<style>
.tblResponsive
{
	width:100%;
}
.tblResponsive tr td
{
	border-bottom:solid 1px #e6e6e6;
	padding:5px;
}
.tblResponsive tr.tblHead td
{
	font-weight:bold;
}
@media only screen and (max-width: 480px) {

.tblResponsive tr.tblHead
{
	display:none;
}

.tblResponsive tr,
.tblResponsive td
{
	display:block;
}

.tblResponsive tr
{
	border-bottom:solid 5px #e6e6e6;
}
.tblResponsive tr td
{
	padding-left:50%;
}

.tblResponsive tr td:before
{
	content: attr(abbr);
    left: 5px;
    position: absolute;
    text-align: left;
    width: 45%;
	font-weight:bold;
}

}
</style>
<table class="tblResponsive">
	<tr class="tblHead">
		<td>Heading 1</td>
		<td>Heading 2</td>
		<td>Heading 3</td>
		<td>Heading 4</td>
		<td>Heading 5</td>
		<td>Heading 6</td>
		<td>Heading 7</td>
		<td>Heading 8</td>
		<td>Heading 9</td>
		<td>Heading 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>					
</table>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

submit a html form using iframe

<iframe name="frmIframe"></iframe>
<form action="" method="post" target="frmIframe">
  <input type="submit" value="Submit" />
</form>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

copy textbox text to clipboard by js

<script>
function copyToClipboard()
{
  var copyInput = document.createElement("input");
  copyInput.setAttribute("value", document.getElementById("copyCode").value);
  document.body.appendChild(copyInput);
  copyInput.select();
  document.execCommand("copy");
  document.body.removeChild(copyInput);
}
</script>
<div class="input-group input-group-sm">  
	<input class="form-control" id="copyCode" value="copy this" type="text">
	<div class="input-group-btn">
		<button class="btn btn-primary btn-sm" type="button" onclick="copyToClipboard();">Copy this code</button>
	</div>							
</div>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone