Bootstrap 5 Spinners Floats Placements

Bootstrap 5 Spinners Float Placements are used to set the position of spinner elements to left, right, or none depending on the requirements. It is mostly used for responsive design.

Spinners Floats Placements used Classes:

.float-start: It is used to set the position of spinner elements to start.
.float-end: It is used to set the position of spinner elements to the end.
.float-none: It is used to set the position of spinner elements to none.

Syntax:

<div class="clearfix">
      <div class="spinner-border float-end" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
</div>

Example 1: In this example, we will create the spinner and set its position using the float placements.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bootstrap 5 Spinners Floats Placements</title> 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 

        rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

        crossorigin="anonymous"> 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 

        crossorigin="anonymous"> 

    </script> 

</head> 

<body> 

    <div class="container text-center"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <h2>Bootstrap 5 Spinners Floats Placements</h2> 

        <div class="clearfix float-start text-success"> 

            <div class="spinner-border spinner-border-sm" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="spinner-grow spinner-grow-sm" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

        </div> 

        <div class="clearfix float-none text-success"> 

            <div class="spinner-border spinner-border-md" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="spinner-grow spinner-grow-md" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

        </div> 

        <div class="clearfix float-end text-success"> 

            <div class="spinner-border" 

                style="width: 2rem; height: 2rem;" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="spinner-grow" 

                style="width: 2rem; height: 2rem;" role="status"> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

        </div> 

    </div> 

</body> 

</html>

Output:

Example 2: In this example, we will create the button spinner and set its position using the float placements.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bootstrap 5 Spinners Floats Placements</title> 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

        rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

        crossorigin="anonymous"> 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 

        crossorigin="anonymous"> 

    </script> 

</head> 

<body> 

    <div class="container text-center"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <h2>Bootstrap 5 Spinners Floats Placements</h2> 

        <div class="float-start"> 

            <div class="btn btn-secondary" type="button"> 

                <span class="spinner-border spinner-border-sm" 

                    role="status"></span> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="btn btn-secondary" type="button"> 

                <span class="spinner-grow spinner-grow-sm" 

                    role="status"></span> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

        </div> 

        <div class="float-end"> 

            <div class="btn btn-success" type="button"> 

                <span class="spinner-border spinner-border-md" 

                    role="status"></span> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="btn btn-success" type="button"> 

                <span class="spinner-grow spinner-grow-md" 

                    role="status"></span> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

        </div> 

        <div class="float-none"> 

            <div class="btn btn-danger" type="button"> 

                <span class="spinner-border" 

                    style="width: 3rem; height: 3rem;" 

                    role="status"></span> 

                <span class="visually-hidden">Loading...</span> 

            </div> 

            <div class="btn btn-danger" type="button"> 

                <div class="spinner-grow" 

                    style="width: 3rem; height: 3rem;" role="status"> 

                    <span class="visually-hidden">Loading...</span> 

                </div> 

            </div> 

        </div> 

    </div> 

</body> 

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/spinners/#floats

Article Tags :

Bootstrap

Technical Scripter

Web Technologies

Bootstrap-5

Technical Scripter 2022