Open In App

Bootstrap 5 Spacing Gap

Improve
Improve
Like Article
Like
Save
Share
Report

The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides.

When the display is set to grid, you can use gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual grid items. These are generated via our utility API, based on the $spacers Sass map.

Bootstrap 5 Spacing Gap Class:

  • .gap – *: It has 6 size options for all Bootstrap’s grid breakpoints, ranging from gap-0 to gap-5. There is no .gap-auto class as gap-0 effectively serves its purpose.

Syntax: Here * can range from 0 to 5.

<div class="d-grid gap-*">...</div>

Below example, that illustrates the Bootstrap 5 Spacing Gap.

Example 1: Here is an example to demonstrate spacing gap-0, gap-1, and gap-2.

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link href=
        rel="stylesheet">
    <script src=
    </script>
</head>
<body class="m-2">
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Spacing Gap</strong>
        <div class="d-grid gap-0">
            <div class="p-2 bg-light border">
                Technical Scripter Article 1
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 2
            </div>
        </div>
        <div class="d-grid gap-1">
            <div class="p-2 bg-light border">
                Technical Scripter Article 3
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 4
            </div>
        </div>
        <div class="d-grid gap-2">
            <div class="p-2 bg-light border">
                Technical Scripter Article 5
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 6
            </div>
        </div
    </div>
</body
</html>


Output:

Bootstrap 5 Spacing Gap

Example 2: This example below demonstrates spacing gap-3, gap-4, and gap-5.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
<body class="m-2">
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Spacing Gap</strong>
        <div class="d-grid gap-3">
            <div class="p-2 bg-light border">
                Technical Scripter Article 1
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 2
            </div>
        </div>
        <div class="d-grid gap-4">
            <div class="p-2 bg-light border">
                Technical Scripter Article 3
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 4
            </div>
        </div>
        <div class="d-grid gap-5">
            <div class="p-2 bg-light border">
                Technical Scripter Article 5
            </div>
            <div class="p-2 bg-light border">
                Technical Scripter Article 6
            </div>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap 5 Spacing Gap

Reference: https://getbootstrap.com/docs/5.0/utilities/spacing/#gap



Last Updated : 29 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads