Bootstrap Grid Clear float

Till now we have covered most of the fundamental bootstrap grid functionalities. Now is the time to cover some of the more advanced concepts. Bootstrap grid system allows you to create responsive grid based layouts. However, not all the grid columns are of equal sizes. For instance, you might be assigned a task to develop image gallery where each image is of different length. If you try to place the image within bootstrap grid cells, the layout will get distorted with empty spaces between rows. Bootstrap grid clear float class allows help us clear all preceding floats. However, lets first take a look at the following example to see what the actual problem is.

<!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-fluid">
          <h1>Knowledge House</h1>
          <div class="row">
            <div class="col-xs-6 col-sm-3" style="background-color:pink;">
              First Column<br>
              Reduce the size of the screen to less than 768 pixels and see how third and fourth column take up space under 2nd column
            </div>
            <div class="col-xs-6 col-sm-3" style="background-color:yellow;">Second Column</div>
      
            <div class="col-xs-6 col-sm-3" style="background-color:skyblue;">Third Column</div>
            <div class="col-xs-6 col-sm-3" style="background-color:gray;">Fourth Column</div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

In the above code, bootstrap grid system has been used to define layouts for small and extra small screens. From the layout it is visible that on small screen four columns with equal width shall be displayed horizontally. On the other hand, on extra small screens, Ideally two columns and two rows should be displayed where each column will take 50% of screen width.

However, if you reduce the size of your browser past 768 pixels, you shall see that on the left only column1 shall be displayed. On the right, third column shall be displayed under column two. Similarly fourth column will be displayed under the third column.m This means that you will have first column on the left and second, third and fourth column on the right. The reason behind this is that first column and second columns have different heights. First column has larger height, therefore under the second column some space is vacant. Since, bootstrap uses floats to place columns, third column finds space under the second column and displays there.

Now, the question is how to fix this? This is clearly floating problem and we need to find something similar to css “clear:both”. In bootstrap, you have “clearfix” class which you add to the div where you want to clear floats for all the preceding divs. Let’s modify our code to see how “clearfix” class solves our problem.

<!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-fluid">
          <h1>Knowledge House</h1>
          <div class="row">
            <div class="col-xs-6 col-sm-3" style="background-color:pink;">
              First Column<br>
              Reduce the size of the screen to less than 768 pixels and see how third and fourth column take up space under 2nd column
            </div>
            <div class="col-xs-6 col-sm-3" style="background-color:yellow;">Second Column</div>
            <!-- Clearfix class for extra-small screens -->
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-3" style="background-color:skyblue;">Third Column</div>
            <div class="col-xs-6 col-sm-3" style="background-color:gray;">Fourth Column</div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

<<< Bootstrap Grid ExamplesBootstrap Grid Offset Column >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .