Bootstrap 5 Spacing

Last Updated : 02 Dec, 2022

The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an element or container.

To change an element’s appearance, Bootstrap offers a variety of responsive margin and padding utility classes. The classes are named using the format {property}{sides}-{breakpoint}-{size} for sizes s, md, xs, lg, xl, XXL. Here sides can be t(top), b(bottom), e(end),s (start), etc.

Margin and padding: Bootstrap provides several short-hand utility classes to add margin and padding between two elements or a subgroup of an element’s sides to modify its appearance. It allows spacing ranging from .25rem to 3rem.
Negative Margin: Bootstrap has negative margin classes that can be used to add negative margins to elements as well. These classes have a similar syntax to general spacing classes but with an n just before the size.
Gap: When the display is set to grid, you can make use of gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual grid items.
Sass: This involves the Sass map and spacing utilities that are declared in Utility API.

Example 1: Here is an example of margin and padding using bootstrap spacing classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap 5 Spacing</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2 class="m-1 p-1">Bootstrap 5 Spacing</h2>
    </div>
    <div class="container text-white">
 
        <div class="mt-5 px-5 bg-success">
            GeeksForGeeks-Padding to the left and margin to the top
        </div>
 
 
        <br>
 
        <div class="mx-4 bg-success">
            GeeksForGeeks - margin from left and Right of div
        </div>
        <br>
 
        <div class="py-4 bg-success">
            GeeksForGeeks - Padding to the top and bottom of div
        </div>
        <br>
        <div class="px-4 bg-success">
            This is GeeksForGeeks -Padding to the left and Right of div
        </div>
    </div>
 
</body>
 
</html>

Output:

Padding in Margin in Bootstrap 5

Example 2: Here is an example of a gap using bootstrap spacing classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap 5 Spacing</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
          rel="stylesheet">
 
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Spacing</h2>
        <div class="d-grid gap-2">
            <div class="p-1 bg-warning ">GeeksForGeeks item 1</div>
            <div class="p-1 bg-success ">GeeksForGeeks item 2</div>
            <div class="p-1 bg-primary ">GeeksForGeeks item 3</div>
        </div>
 
</body>
 
</html>