Bootstrap includes a large set of small utility classes that adjust spacing, layout and appearance directly in HTML, which handles a surprising number of everyday styling needs without writing a single line of custom CSS.

The spacing naming pattern

  • m means margin, the space outside an element; p means padding, the space inside it.
  • t, b, s and e mean top, bottom, start (left in most languages) and end (right); x and y mean both horizontal or both vertical sides together.
  • A number from 0 to 5 sets the size, with 0 removing the space entirely and 5 being the largest preset step.
mt-3   margin on top
pb-4   padding on the bottom
mx-2   margin on left and right
p-0    no padding at all

Responsive spacing

A breakpoint can be inserted into the same pattern, so spacing only changes from a certain screen size upward, similar to how responsive grid columns work:

mt-2 mt-md-4

This applies a small top margin everywhere, but increases it once the screen reaches medium width, useful for giving elements more breathing room on larger screens without cramming a phone layout.

Flexbox utilities

Adding d-flex turns an element into a flex container, after which several more classes control how its children align:

<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

justify-content-between pushes the two children to opposite ends of the row, and align-items-center centres them vertically, a combination that comes up constantly in real layouts such as a header bar.

The gap utility

Inside a flex or grid container, gap classes add space between children directly, without needing individual margins on each item:

<div class="d-flex gap-3">...</div>

Other handy utilities

  • text-center centres text horizontally.
  • w-100 and h-100 set full width or full height relative to the parent.
  • rounded and rounded-circle add rounded corners or a fully circular shape.
  • shadow adds a soft drop shadow for a subtle sense of depth.

Why utilities are worth learning well

Small visual tweaks handled through utility classes stay directly visible right in the markup, rather than hiding away inside a separate stylesheet that grows a new rule for every minor adjustment. Once the naming pattern clicks, most everyday spacing and alignment work becomes a matter of combining a few short classes rather than writing and naming new CSS rules by hand.