Clearfix in Bootstrap
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 --> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" > < 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 --> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" > < 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