- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
Clear the float of an element with Bootstrap
To clear the float of an element, use the .clearfix Bootstrap class.
Example
You can try to run the following code to clear float of an element
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;"> <div class = "pull-left" style = "background: blue; color: white;"> left </div> <div class = "pull-right" style = "background: blue; color:white;"> right </div> </div> </body> </html>
- Related Articles
- Float an element to the right with Bootstrap 4
- Float an element to the left with Bootstrap 4
- Float an element to the left on different screens with Bootstrap
- Float an element to the right on different screens with Bootstrap
- Remove float from an element in Bootstrap
- Make an element invisible with Bootstrap
- Align an element with the baseline of the parent in Bootstrap 4
- Align an element with the lowest element on the line in Bootstrap 4
- Align an element with the top of the tallest element on the line in Bootstrap 4
- Force an element to be hidden with Bootstrap
- Turning off Float using Clear Property of CSS
- Align an element with the bottom of the parent element's font in Bootstrap 4
- Align an element with the top of the parent element's font in Bootstrap 4
- Make an element look like a heading with Bootstrap
- Add a shadow to an element with Bootstrap 4
Advertisements