Clearfix in Bootstrap - GeeksforGeeks

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 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
      
    <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 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
      
    <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

Recommended Posts: