Bootstrap 5 Spinners Margin

Last Updated : 21 Nov, 2022

Bootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x (for both left and right), y (for top and bottom), and blank (for all sides).

The following syntax are used in the various classes for adding spacing:

(property)(sides)-(size) for xs
(property)(sides)-(breakpoint)-(size) for sm, md, lg, and xl.

Property: There are two ways of adding spacing to the elements.

m: This property defines the margin. Margin provides an edge or border.

Sides: This allows users to add spacing in content to a specific side wherever required.

t: margin-top/padding-top.
b: margin-bottom/padding-bottom.
l: margin-left/padding-left.
r: margin-right/padding-right.
x: for padding-left and padding-right/margin-left and margin-right.
y: for padding-top and padding-bottom/margin-top and margin-bottom.
blank: margin/padding on all sides of the element.

Size: This allows users to add a specific amount of spacing to a level.

0 – 0px margin/padding.
1 – 4px margin/padding.
2 – 8px margin/padding.
3 – 16px margin/padding.
4 – 24px margin/padding.
5 – 48px margin/padding.
auto – auto margin.

Example 1: In this example, we will add a margin to the spinners element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Spinners Margin</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Margin</h2>

        <h3>Spinners without Margin</h3>
        <div class="spinner-border spinner-border"
            role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <br><br>

        <h3>Spinners with Margin</h3>
        <div class="spinner-border spinner-border m-5"
            role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow m-5" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will add a margin to the spinners element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Spinners Margin</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Margin</h2>

        <h3>Spinners without Margin</h3>
        <button class="btn btn-success" type="button">
            <span class="spinner-grow text-white
                spinner-grow-sm" role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>

        <button class="btn btn-success" type="button">
            <span class="spinner-border spinner-border-sm"
                role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <br><br>

        <h3>Spinners with Margin</h3>
        <button class="btn btn-primary m-4" type="button">
            <span class="spinner-grow text-white
                spinner-grow-md" role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>

        <button class="btn btn-primary m-4" type="button">
            <span class="spinner-border spinner-border-md"
                role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
    </div>
</body>

</html>