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>

Lakshmi Srinivas

Programmer / Analyst / Technician

Updated on: 12-Jun-2020

317 Views

Kickstart Your Career

Get certified by completing the course

Get Started