BootstrapHow-ToBeginner · 3 min read

How to Use Gap in Bootstrap for Spacing Between Elements

In Bootstrap, you can use the gap utility classes like gap-1 to gap-5 to add consistent spacing between flex or grid items. These classes control the space between elements inside containers with d-flex or d-grid display. Just add the appropriate gap-* class to your container to apply the spacing.

📐

Syntax

The gap utility in Bootstrap uses classes in the format gap-{size}, where {size} is a number from 0 to 5. These classes add spacing between items inside flex or grid containers.

gap-0: No gap
gap-1: Small gap
gap-2: Medium gap
gap-3: Larger gap
gap-4: Even larger gap
gap-5: Largest gap

Use these classes on a container with d-flex or d-grid to control spacing between child elements.

html

<div class="d-flex gap-3">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-secondary text-white">Item 2</div>
  <div class="p-2 bg-success text-white">Item 3</div>
</div>

Output

Three colored boxes in a row with medium spacing between them

💻

Example

This example shows a flex container with three boxes spaced using gap-4. The gap adds consistent space between the boxes horizontally.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Gap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="d-flex gap-4 p-3 bg-light">
    <div class="p-3 bg-primary text-white">Box 1</div>
    <div class="p-3 bg-danger text-white">Box 2</div>
    <div class="p-3 bg-warning text-dark">Box 3</div>
  </div>
</body>
</html>

Output

A horizontal row of three colored boxes with noticeable space between them

⚠️

Common Pitfalls

Common mistakes when using gap in Bootstrap include:

Applying gap classes to containers without d-flex or d-grid display, which means the gap will not work.
Expecting gap to add margin or padding to individual items; it only controls space between items.
Using gap on inline elements or block containers without flex/grid, which has no effect.

Always ensure your container uses d-flex or d-grid for gap to work.

html

<!-- Wrong: gap on a normal block container -->
<div class="gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Right: gap on a flex container -->
<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Output

First container: items with no space between; second container: items spaced apart horizontally

📊

Quick Reference

Bootstrap gap utility classes:

Class	Effect
gap-0	No gap between items
gap-1	Small gap (0.25rem)
gap-2	Medium gap (0.5rem)
gap-3	Large gap (1rem)
gap-4	Extra large gap (1.5rem)
gap-5	Largest gap (3rem)

✅

Key Takeaways

Use gap-* classes on containers with d-flex or d-grid to add spacing between child elements.

Gap controls space between items, not padding or margin on individual elements.

Gap classes range from gap-0 (no space) to gap-5 (largest space).

Without flex or grid display, gap classes have no effect.

Use gap for clean, consistent spacing instead of manual margins.