Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element
HTML
<div class="mx-auto bg-secondary text-white" style="width: 200px;">    Centered element</div>

Gap

When using display: grid, you can make use of gap utilities on the parent grid container.

Grid item 1
Grid item 2
Grid item 3
HTML
<div class="d-grid gap-3"><div class="p-2 bg-light border">Grid item 1</div><div class="p-2 bg-light border">Grid item 2</div><div class="p-2 bg-light border">Grid item 3</div></div>
Recent Notification