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.
<!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> |
chevron_right
filter_none
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"> <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> |
chevron_right
filter_none
Output:
Recommended Posts:
- What is a clearfix?
- Include Bootstrap in AngularJS using ng-bootstrap
- Bootstrap 4 | Tables
- Bootstrap 4 | Popover
- Bootstrap 4 | Colors
- Bootstrap 4 | Buttons
- Bootstrap 4 | Badges
- Bootstrap 4 | Alerts
- Bootstrap 4 | Images
- Bootstrap 4 | Jumbotron
- Bootstrap 4 | Spinners
- Bootstrap 4 | Tooltip
- Bootstrap 4 | Introduction
- Bootstrap 4 | Typography
- Bootstrap 4 | Scrollspy
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
