Bootstrap 4 - Clearfix Close Icon

Description

Clearfix utility is used to clear the floated content in a container and close icon for dismissing the content such as alerts or modals.

Example

For clearfix utility, use the .clearfix class to the parent element and close the content by adding close class on the element.

The following example shows the usage of clearfix and close icon −

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src =  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Clearfix</h2>
         <div class = "bg-secondary clearfix">
            <button type = "button" class = "btn btn-success float-left">Left Button</button>
            <button type = "button" class = "btn btn-success float-right">Right Button</button>
         </div>
         <br>
         
         <h2>Close</h2>
         <button type =" button" class = "close" aria-label = "Close">
            <span aria-hidden = "true">×</span>
         </button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_utilities.htm