Bootstrap 5 Clearfix

Last Updated : 28 Feb, 2023

Bootstrap 5 .clearfix helper class facilitates clearing and fixing the floated content in an element or container by adding the clearfix utility. Basically, without clearfix class, the floated content/elements act like they have a position set to absolute and to fix that, we use the clearfix helper class of bootstrap.

Syntax:

<div class="clearfix">
    ...(floating content)
</div>

Example 1: In this example, we have 2 identical div elements with the background color set to “.bg-danger” class. Both have children, an input tag (for email) which is floated at the start, and a submit button which is floated at the end. Then, one of them is without the “.clearfix” class and another div is with the “.clearfix” class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h4> 
            Bootstrap 5 Clearfix 
        </h4> 
        <h5 class="mt-3"> 
            Without Clearfix 
        </h5> 
        <div class="bg-danger w-25 p-1"> 
            <input type="text" 
                class="float-start" 
                placeholder="email"> 
            <button type="button" 
                class="float-end btn btn-success"> 
                Submit 
            </button> 
        </div> 
  
        <h5 class="mt-5"> 
            With Clearfix 
        </h5> 
        <div class="bg-danger clearfix w-25 p-1"> 
            <input type="text" 
                class="float-start" 
                placeholder="email"> 
            <button type="button" 
                class="float-end btn btn-success"> 
                Submit 
            </button> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example 1: Output of Bootstrap 5 clearfix

Example 2: In this example, we have 5 buttons and we have applied “.float-start“, “.float-end” and “.float-none” classes to these buttons and then have applied the “.clearfix” class to the parent div.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h4>Bootstrap 5 Clearfix</h4> 
          
        <div class="clearfix bg-danger w-50 p-1"> 
            <button class="btn btn-warning float-start"> 
                Button 1 
            </button> 
            <button class="btn btn-warning float-end"> 
                Button 2 
            </button> 
            <button class="btn btn-warning float-start"> 
                Button 3 
            </button> 
            <button class="btn btn-warning float-none"> 
                Button 4 
            </button> 
            <button class="btn btn-warning float-end"> 
                Button 5 
            </button> 
        </div> 
    </div> 
</body> 
  
</html> 