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
  

Bootstrap Basics : Getting started

So if you are beginner you have to go through this page or else you can skip to the next tutorial.

What is Bootstrap?

Basically what is bootstrap? As mentioned in introductory  part this is a front-end framework for making the web pages easier.But how???

As we know , we use CSS classes to make our web page look better and richer. So Bootstrap is nothing but a  set of pre-defined classes which can be used further in our web page to make it better and of course in a fast manner.

 

What Do I need to install?

As of now you don’t need to install anything on your system use it until you are not experimenting your web page in offline mode.

You just need to include below three lines  in your <  head > tag to ensure the loading of bootstrap libraries to your web page.


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

Bootstrap – A great Hack for Front End developers

Boostrap

 

Bootstrap  , a front-end framework popular among the  front end developers has helped a lot to designers for   easy and quick designing of their websites.Originally developed by the Twitter employees the framework also represent the responsive design for the web page.

 

So here we are  presenting the series of simple and quick tutorials  for Bootstrap Framework.

If you want to enter into the buzz here is the start – Bootstrap Tutorial Part 1.

 

 

 

 

 

 

 

 

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
  
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.