Utility Classes

Adjust spacing, color, text, borders and flex layout with Bootstrap's small, single-purpose utility classes, without writing CSS.

Apprentice · CSS · HTML · Web Development · Updated November 3, 2026

After this lesson you can

Style elements with Bootstrap's utility classes for spacing, color, text and flex layout

Key takeaways

A spacing class is property, side and size: mt-4 is margin-top, size 4, and px-4 is padding on the left and right.
Spacing sizes run from 0 to 5, or auto: mx-auto centers an element that has a set width, such as width: 300px, with automatic side margins.
Text and background colors use the theme's names, such as text-primary and bg-dark. Check that the text stays easy to read on its background.
d-flex makes a flex container, and classes such as justify-content-between and align-items-center arrange its children.
Display classes take breakpoints: d-none d-md-block hides an element on small screens and shows it from md up.

Components give you whole pieces of interface. Utility classes are the small adjustments: a little more space here, centered text there, a different color. Each does one job, and its name says what.

Spacing: margin and padding

Spacing classes are built from three parts:

Part	Choices
property	`m` margin (space outside), `p` padding (space inside)
side	`t` top, `b` bottom, `s` start (left), `e` end (right), `x` left and right, `y` top and bottom, or nothing for all four
size	`0` to `5`, from none to large, or `auto`

<h1 class="mt-4 mb-2">Featured Books</h1>
<div class="p-3">Padding on every side</div>
<div class="px-4 py-2">More padding left and right than top and bottom</div>
<div class="mx-auto" style="width: 300px;">Centered by automatic side margins</div>

mt-4 is margin-top, size 4; px-4 is padding on the x axis (left and right). Once you know the three parts, you can read any spacing class.

Text

<p class="text-center">Centered text</p>
<p class="text-end">Right-aligned text</p>
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="fs-4">A larger font size</p>

Colors and backgrounds

Text and background colors use the theme's names, the same ones as buttons:

<p class="text-primary">Primary-colored text</p>
<p class="text-body-secondary">Quieter, secondary text</p>
<div class="bg-dark text-white p-3">White text on a dark background</div>
<div class="bg-success-subtle p-3">A pale green background</div>

When you set a background, check that the text color is still easy to read on it.

Borders, corners and shadows

<div class="border p-3">A border all around</div>
<div class="border-bottom">A border underneath</div>
<img src="images/learning-csharp.svg" class="rounded" alt="A book cover with rounded corners">
<div class="shadow p-3">A shadow under the box</div>

Flex layout

The d-flex class turns an element into a flex container, as display: flex does in CSS. Further classes then arrange its children:

<div class="d-flex justify-content-between align-items-center border-bottom py-2">
    <span class="fw-bold">Learning C# Step by Step</span>
    <a href="#" class="btn btn-sm btn-primary">Buy Now</a>
</div>

Class	Does
`d-flex`	lays the children out in a row
`justify-content-between`	pushes them to the two ends, with the space between
`justify-content-center`	centers them along the row
`align-items-center`	centers them vertically
`gap-3`	puts space between them
`flex-column`	stacks them in a column instead

Hiding and showing by screen size

Display classes take breakpoints too: d-none d-md-block hides an element on small screens and shows it from md up.

<p class="d-none d-md-block">Shown only on tablets and wider screens.</p>

Check yourself

2 questions to try on the lesson page.

So what

Utility classes handle the hundred small adjustments every page needs, right in the HTML, so most pages need little or no CSS of your own.

Key terms

Cheat sheets

Utility Classes