Utilities & Customization

Utility classes#

Alongside its components, Bootstrap ships a large set of small single-purpose utility classes — conceptually similar to Tailwind's utilities, though narrower in scope and not generated from an arbitrary scale.

Spacing#

<div class="m-3 p-4">Margin 3, padding 4 on all sides</div>
<div class="mt-2 mb-4 px-3">Top margin 2, bottom margin 4, horizontal padding 3</div>
<div class="mx-auto" style="width: 200px;">Horizontally centered fixed-width box</div>

Bootstrap's spacing scale runs 0–5 (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem), following the same directional naming as the grid gutters: m/p for margin/padding, t/b/s/e/x/y for the side (s/e mean "start"/"end," which flip automatically in right-to-left languages, unlike the old l/r).

Flexbox utilities#

<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">
    <!-- stacked on mobile, row from md up -->
</div>

Display#

<div class="d-none d-md-block">Hidden on mobile, visible from md up</div>
<div class="d-block d-md-none">Visible on mobile, hidden from md up</div>

d-none/d-block/d-flex/d-grid map directly onto the CSS display property, and can be combined with breakpoint infixes (d-md-flex) the same way grid columns are.

Text & color#

<p class="text-center text-muted fw-bold">Centered, muted, bold text</p>
<span class="badge bg-success">Active</span>
<span class="badge bg-danger">Inactive</span>

Customizing via Sass variables#

The CDN build ships pre-compiled, fixed CSS — to actually change Bootstrap's design tokens (colors, fonts, border-radius, breakpoints), you need the Sass source, installed via npm:

npm install bootstrap sass

Create your own entry Sass file that overrides variables before importing Bootstrap's source:

// custom.scss

// 1. Override Bootstrap's default variables
$primary: #7c3aed;
$border-radius: 0.75rem;
$font-family-sans-serif: "Inter", sans-serif;

// 2. Import Bootstrap's Sass source (picks up your overrides above)
@import "bootstrap/scss/bootstrap";

Compile it with your build tool of choice (Vite, or the sass CLI directly):

sass custom.scss custom.css

Because every Bootstrap component is built from these same Sass variables internally, overriding $primary once retints .btn-primary, .badge.bg-primary, form focus rings, and every other component that references the primary color — a single-source-of-truth rebrand instead of overriding dozens of individual CSS rules after the fact.

Common mistakes#

• Trying to override Bootstrap's colors by writing custom CSS after the CDN stylesheet, fighting specificity, instead of overriding the actual Sass variables at the source (which requires the npm/Sass build, not the CDN).
• Loading the full Bootstrap CSS bundle just to use a handful of utility classes — if only utilities are needed, Bootstrap's Sass source can be configured to import just the utilities module rather than every component.
• Forgetting that Sass variable overrides must be declared before @import "bootstrap/scss/bootstrap" — Sass variables in this style of import only affect definitions that come after them.