Utilities

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap ships hundreds of small, single-purpose classes — utilities — each of which sets exactly one CSS property (or a tightly related handful of them). Instead of writing a custom rule for "add a bit of top margin" or "hide this on small screens," a page composes utility classes directly in markup:

<div class="mt-3 px-2 bg-light border rounded shadow-sm">
  Spacing, background, border, and shadow -- all from utility classes, no custom CSS.
</div>

This page surveys the utility groups you reach for constantly. Every one of them is generated by Bootstrap’s Sass build from a shared configuration mechanism, covered separately in The Utility API.

Spacing

Spacing utilities set margin and padding using a short, consistent naming scheme:

{property}{sides}-{size}

property is m (margin) or p (padding).
sides is t (top), b (bottom), s (start — left in LTR), e (end — right in LTR), x (left and right), y (top and bottom), or omitted entirely for all four sides.
size is 0--5 on Bootstrap’s default spacing scale (a multiple of $spacer, which defaults to 1rem), or auto for margin.

<div class="mt-3">Margin-top: 1rem (spacer * 1)</div>
<div class="px-2">Padding-left and padding-right: 0.5rem</div>
<div class="mb-0">Margin-bottom: 0</div>
<div class="mx-auto" style="width: 200px;">Horizontally centered block</div>
<div class="py-5">Padding-top and padding-bottom: 3rem</div>

Negative margins follow the same pattern with an n prefix before the size, e.g. mt-n2 for a negative top margin of 0.5rem — but only once $enable-negative-margins has been set to true and Bootstrap’s CSS recompiled from Sass; it defaults to false, so n-prefixed classes generate no CSS at all in the stock CDN or npm dist build. The scale itself — how many steps it has and what each one measures — is a Sass map under the hood, not a hard-coded list of classes; see The Utility API for how to extend, renumber, or enable a disabled utility group like this one.

Colors and backgrounds

Text color and background color utilities are generated from the same theme-color palette (primary, secondary, success, danger, warning, info, light, dark) used throughout Bootstrap’s components:

<p class="text-primary">Primary-colored text</p>
<p class="text-danger">Danger-colored text</p>
<p class="text-muted">Muted, de-emphasized text</p>

<div class="bg-success text-white p-3">Success background, white text</div>
<div class="bg-light p-3">Light background</div>
<div class="bg-dark text-white p-3">Dark background, white text</div>

Bootstrap 5.3 introduced subtle color utilities and full color-mode (light/dark) support, so bg-primary-subtle and text-primary-emphasis pair a low-saturation background with a readable foreground automatically, rather than requiring a hand-picked lighter shade:

<div class="bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded p-3">
  Subtle background, readable emphasis text, matching subtle border.
</div>

Opacity utilities compose with color: text-opacity-75, bg-opacity-25, and friends set the alpha channel of the corresponding CSS custom property that the color utility itself defines.

Borders

Border utilities add, remove, round, or color a border:

<div class="border">All four sides</div>
<div class="border-top border-3">Top only, 3x width</div>
<div class="border-0">No border (removes one inherited from a component)</div>
<div class="border border-danger">Danger-colored border</div>

<img src="avatar.jpg" class="rounded-circle" alt="Avatar" />
<div class="rounded-3">Larger corner radius</div>
<div class="rounded-top-0">Square top corners only</div>

rounded (and its directional/sized variants rounded-top, rounded-3, rounded-pill, rounded-circle) sets border-radius; it works whether or not the element actually has a visible border, since rounding and bordering are independent concerns kept as separate utility groups.

Flexbox

Bootstrap’s grid is itself built on flexbox (see The Grid System), and the same flex utilities are available for any element, grid or not:

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

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-2 bg-light">One</div>
  <div class="p-2 bg-light">Two</div>
</div>

<div class="d-flex flex-wrap">
  <div class="p-2">Wraps onto a new line once it runs out of room</div>
</div>

<div class="d-flex">
  <div class="flex-grow-1">Grows to fill remaining space</div>
  <div>Fixed width</div>
</div>

The common flex properties are all covered: flex-row/flex-column (and -reverse variants), justify-content-, align-items-, align-self-, flex-wrap/flex-nowrap, flex-fill, flex-grow-/flex-shrink-, order-, and gap- for the spacing between flex (or grid) children — gap- is a single utility that replaced a lot of manual margin juggling between siblings.

Display

d-* sets the CSS display property, and is one of the most frequently used utility groups because it is also the mechanism for responsive show/hide:

<div class="d-none d-md-block">Hidden below md, visible md and up</div>
<div class="d-block d-md-none">Visible below md, hidden md and up</div>
<span class="d-inline-block">inline-block</span>
<table class="d-table"><!-- forces display: table --></table>

Every responsive utility in Bootstrap follows this same breakpoint-infix pattern: no infix targets all viewport sizes (mobile-first, since Bootstrap’s breakpoints are min-width media queries), and -sm-, -md-, -lg-, -xl-, -xxl- progressively raise the minimum width at which the rule takes effect.

Position

Positioning utilities cover the position property and the four offset properties:

<div class="position-relative">
  <span class="position-absolute top-0 end-0 badge bg-danger">9</span>
  Parent providing the positioning context
</div>

<div class="position-fixed bottom-0 start-0">Fixed to the bottom-left of the viewport</div>
<nav class="position-sticky" style="top: 0;">Sticky nav, sticks once scrolled to top: 0</nav>

top-, bottom-, start-, end- (each with 0, 50, 100 percentage values) and the translate-middle family combine to center an element precisely over a positioned ancestor — the classic use being the notification badge shown above, offset and translated so it sits on the corner of its parent rather than inside it.

Sizing

w- and h- set width/height as a percentage of the containing block, plus mw-100/mh-100 for a max constraint that never overflows its parent:

<div class="w-25">25% width</div>
<div class="w-50">50% width</div>
<div class="w-100">100% width</div>
<img src="hero.jpg" class="w-100 h-auto" alt="Hero image, full width, proportional height" />

<div style="height: 300px;">
  <div class="h-100 bg-light">Fills the 300px parent</div>
</div>

vw-100 and vh-100 size against the viewport instead of the containing block, useful for a full-bleed hero section or a full-height layout shell.

Shadows

shadow-* applies one of a small fixed set of box-shadow presets, rather than an arbitrary elevation scale:

<div class="shadow-none p-3 mb-3">No shadow</div>
<div class="shadow-sm p-3 mb-3">Small shadow -- subtle depth for a card or input</div>
<div class="shadow p-3 mb-3">Regular shadow -- the default elevation</div>
<div class="shadow-lg p-3 mb-3">Large shadow -- a modal, popover, or dropdown menu</div>

Four steps (none, sm, default, lg) is deliberately small: Bootstrap favors a few consistent elevation levels over a large scale that different developers would apply inconsistently across a project.

Where these classes come from

Every utility shown on this page — mt-3, text-primary, d-flex, shadow-sm, and the rest — is not hand-written CSS in Bootstrap’s source. It is generated at Sass-compile time from a single configuration map, $utilities, which drives the class name, the CSS property, the set of values, and whether responsive and !important variants are produced. See The Utility API for how that map works and how to add, remove, or restyle any utility class without touching Bootstrap’s own source files.