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>

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>