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 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>