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>
