Skip to content
Related Articles

Related Articles

Clearfix in Bootstrap

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jul, 2021
View Discussion
Improve Article
Save Article

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. 
 

html




<!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. 
 

html




<!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:
 

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!