Skip to content
Related Articles

Related Articles

Clearfix in Bootstrap
  • Last Updated : 12 Feb, 2019

One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS.

Bootstrap allows us to use a class named clearfix which is used to clear the floated contents inside any container.

Example 1: Without clearfix property. In the below program two buttons are floated to left and right.




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    
    <!-- Bootstrap CSS and JS -->
      
    <style>
    .left{
        float:left;
    }
      
    .right{
        float:right;
    }
    </style>
</head>
  
<body>
    <div class="bg-info">
        <button type="button" class="btn btn-secondary left">
            floated left button
        </button>
                
        <button type="button" class="btn btn-secondary right">
            floated right button
        </button>
    </div>
</body>
</html>

Output:

Clearfix property clear all the floated content of the element that it is applied to. It is also used to clear floated content within a container.



Example 2: With clearfix property. Without using the clearfix class, the parent div may not wrap around the children button elements properly and can cause a broken layout.




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    
    <!-- Bootstrap CSS and JS -->
      
    <style>
    .left{
        float:left;
    }
      
    .right{
        float:right;
    }
    </style>
</head>
  
<body>
    <div class="bg-info clearfix">
        <button type="button" class="btn btn-secondary left">
            floated left button
        </button>
                
        <button type="button" class="btn btn-secondary right">
            floated right button
        </button>
    </div>
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :