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
<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
<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>