Bootstrap Helper Classes

We have covered almost all of the fundamental bootstrap concepts. Now, is the time to see some of the most commonly used bootstrap helper classes along with their usage. Bootstrap helper classes are basically designed to control the styling of html components at run time. For instance, you use “float-right” class with any element to float it right. Using core CSS, you will have to first write custom css style and will have to import that in your element. Following are some of the most commonly used bootstrap helper classes.

Background Helpers

These classes are extremely handy when you want to change the background of any element at run time without having to write custom CSS. Following are some of the most commonly used background helper classes.

  • .bg-primary
  • .bg-info
  • .bg-success
  • .bg-danger
  • .bg-warning

Take a look at the following example to see some of the above classes in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        
    </head>
    
   
    <body>
        <div class="container">
          <div class="bg-primary">This is with background primary</div>
          <p class="bg-warning" >This is with warning background</p>
        </div>
    </body>

</html>

Download the code Try the code

Open the above page in browser. You will see some text with dark blue background. Below that, you will see some text with light orange background. The background of the first line of text is blue because, it is inside the div having class “bg-primary”. On the other hand, the background of the second line of text is light orange because it is inside paragraph with class “bg-warning”

Text Helpers

Text helper classes helps styling of text elements in bootstrap. Following are some of the most frequently used text helper classes.

  • .text-success
  • .text-primary
  • .text-muted
  • .text-warning
  • .text-info
  • .text-danger

Have a look at the following code to see text helper classes in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        
    </head>
    
   
    <body>
        <div class="container">
          <div class="text-success">This is text with success helper class</div>
          <p class="text-danger" >This is text with danger helper class</p>
        </div>
    </body>

</html>

Download the code Try the code

Open the above webpage in browser. You will see two lines. First line will be in green while the second line will be in red color. This is because first line of text is inside a div with class “text-success” while the second line was inside a paragraph with class “text-danger”. You should try to replace these text classes with the others and see how the text color changes.

In next and final article of this bootstrap series, we shall study more about these helper classes. Keep visting the site.

<<< Bootstrap Push/PullAdvanced Bootstrap Helper Classes >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .