Advanced Bootstrap Helper Classes

We started bootstrap helper classes in the last article. We studied background helper classes as well as text helper classes. This article focuses on advanced bootstrap helper classes. We shall first discuss some basic miscellaneous helper classes such as “pull-left”, “show”, “hide” etc. In the last section we shall study responsive helper classes. Let’s first see some commonly used helper classes other than background and text classes.

  • .show
  • .hidden
  • .close
  • .clear-fix
  • .pull-right
  • .pull-left

Take a look at the following example to see how these classes actually work.

<!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>
     
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
        .boxgray{
            background-color: gray;
        }
          .boxpink{
            background-color: pink;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4 box boxblue"></div>
                <div class="col-md-4 box boxgray pull-right"></div>
                <div class="clearfix"></div>
                <div class="col-md-4 box boxpink"></div>
                <div class="col-md-4 box boxblue pull-right hidden"></div>
            </div>
        </div>
    </body>

</html>

Download the code Try the code

Open the above page in the browser. You should see three boxes: A blue one aligned to the left. A grey one aligned to the right and a pink one under the blue box and aligned to the left. Now, pay close attention to the code and see what is happening there. We have a div with column width of 4 and background color of skyblue. This is the blue box aligned to the left. Next we have a div with column width of 4 and gray background. This is the gray box aligned to right. Ideally this should be adjacent to the blue box, but since we have used “pull-right”, the box is pulled all the way to the right of screen.

The “pull-right” class actually floats the element to the right. Therefore to display any element on the next line, we have to clear the float. This done via div with class “clearfix”. Finally another div with column width of 4 and pink background is created and displayed under the blue box.

Bootstrap Helper Classes for Responsiveness

Helper classes are extremely useful when it comes to creating layouts for multiple screen size. You might want to display certain content only on mobiles and not on other screens and vice-versa. You can achieve this functionality via bootstrap helper classes. Following are some of the helper classes for responsiveness

  • .visible-xs
  • .visible-sm
  • .visible-md
  • .visible-lg
  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

Take a look at the following code sample to see these 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>
     
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
        .boxgray{
            background-color: gray;
        }
          .boxpink{
            background-color: pink;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-4 hidden-xs box boxblue"></div>
                <div class="col-sm-4 hidden-sm visible-md hidden-lg box boxpink"></div>
                <div class="col-sm-4 visible-lg box boxgray"></div>
               
            </div>
        </div>
    </body>

</html>

Download the code Try the code

The above code contains three divs each. Each div has a column width of 4. The first blue div has a class “hidden-xs”. This means that blue box will not be visible on extra small screens. The second pink div has classes “hidden-sm” and “hidden-lg”. This means that pink box will be hidden on small and large screens and will be visible on extra small and medium screens. Finally third div has class “visible-lg”. This specifies that the gray box will only be visible on large screens.

<<< Bootstrap Helper Classes
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .