Utility Classes

Beyond components, Bootstrap ships hundreds of small, single-purpose classes for spacing, flexbox layout, and display — the kind of tiny adjustments that used to mean writing a one-off CSS rule for every tweak.

The spacing scale

Margin and padding utilities follow a pattern: {property}{sides}-{size}. m is margin, p is padding; t/b/s/e/x/y pick a side (start/end respect left-to-right vs right-to-left languages automatically); sizes run 0 through 5 on a consistent scale:

HTML index.html

<div class="mt-4 mb-2 px-3">Spaced box</div>
<div class="p-0">No padding at all</div>
<div class="p-5">Maximum padding</div>

Rendered result

Three boxes with visibly different spacing: the first has a noticeable gap above it, a smaller gap below, and padding on its left/right; the second box's content touches its edges directly with zero padding; the third box has generous, roomy padding on every side, clearly larger than the default.

mt-4 is margin-top step 4, mb-2 is margin-bottom step 2, and px-3 is padding-left-and-right (x-axis) step 3 — the same scale and letters work identically for both margin and padding.

Flexbox utilities

HTML index.html

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

Rendered result

"Left" and "Right" pushed to opposite ends of the container's full width, both vertically centered on the same line — no custom CSS, just three flexbox utility classes doing the entire job.

d-flex turns on flexbox for that element, justify-content-between pushes children to the far ends with space between them, and align-items-center centers them vertically — this exact trio is one of the most common patterns in real Bootstrap layouts (think: a title on the left, a button on the right, same row).

Display and visibility

HTML index.html

<p class="d-none d-md-block">Only visible on medium screens and up</p>

Rendered result

On a narrow (mobile) screen: nothing renders at all — the text is completely absent from the page. On a wide (desktop) screen: the paragraph appears normally, as if the classes weren't there.

d-none hides an element completely (display: none); d-md-block overrides that back to visible starting at the md breakpoint. This combination — hide by default, show from a breakpoint up (or the reverse) — is the standard way to show different content to mobile vs desktop visitors.

Course complete: that covers the Bootstrap course from top to bottom — including the framework and its container/viewport requirements, the 12-column responsive grid, typography and the theme color system, buttons, forms and validation states, a collapsing responsive navbar, cards, alerts and badges, modals, and the spacing/flexbox/display utility classes that fill in everything components don't cover. Combined with the HTML and CSS courses, you now have what you need to build a responsive, professional-looking page fast — and to read and modify Bootstrap-based projects you'll run into in the wild.

PreviousModals