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:
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:
Reference: https://getbootstrap.com/docs/5.0/utilities/spacing/#gap