Utility classes are small, single-purpose classes such as mt-3 or d-none. Each one sets one or two CSS properties. They let you adjust spacing, visibility, borders and more directly in your HTML, without writing a new CSS rule for every small change. Bootstrap spacing utilities are the ones you will type most often, so we start there.
How Bootstrap spacing classes are named
Every Bootstrap spacing class, margin or padding, follows the pattern {property}{side}-{size}, with an optional breakpoint: {property}{side}-{breakpoint}-{size}.
| Part | Options | Meaning |
|---|---|---|
| Property | m, p | Margin (outside the border) or padding (inside) |
| Side | t, b, s, e, x, y or nothing | Top, bottom, start, end, left and right together, top and bottom together, or all four sides |
| Size | 0, 1, 2, 3, 4, 5, auto | 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem, or auto (margins only) |
So mb-3 is a 1rem bottom margin, px-4 is 1.5rem padding on the left and right, and mt-0 mt-md-5 means no top margin on phones but 3rem from 768px. The names use start and end instead of left and right, so the same HTML works in right-to-left languages such as Urdu or Arabic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Margin and padding utilities</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
<div class="bg-primary-subtle border border-primary-subtle">
<div class="p-1 bg-body border">p-1 (0.25rem padding)</div>
</div>
<div class="bg-primary-subtle border border-primary-subtle mt-3">
<div class="p-3 bg-body border">p-3 (1rem padding)</div>
</div>
<div class="bg-primary-subtle border border-primary-subtle mt-3">
<div class="p-5 bg-body border">p-5 (3rem padding)</div>
</div>
<div class="bg-warning-subtle border mt-4">
<div class="ms-5 me-2 my-3 p-2 bg-body border">ms-5 me-2 my-3: more space at the start than the end</div>
</div>
<div class="mx-auto mt-4 p-3 border rounded text-center" style="width: 220px;">
mx-auto centres a box that has a width
</div>
<div class="d-flex gap-3 mt-4">
<div class="p-2 border">gap-3</div>
<div class="p-2 border">between</div>
<div class="p-2 border">flex items</div>
</div>
</div>
</body>
</html>The tinted outer boxes make the padding visible. In the last row, gap-3 adds space between items in a flex or grid container, which is cleaner than putting margins on each child. You will see more of gap in the Bootstrap Flex and Alignment lesson.
Tip: Stick to the Bootstrap spacing scale. When everything is a multiple of the same steps (0.25rem, 0.5rem, 1rem…), a page feels consistent, and changing the spacing later is easy. Negative margins such as mt-n2 exist only if you turn them on in Sass, so do not expect them in the CDN build.
Display, sizing and overflow
- Display:
d-none,d-block,d-inline-block,d-flex,d-grid, with breakpoints such asd-lg-none.d-print-nonehides something when the page is printed. - Width and height:
w-25,w-50,w-75,w-100,w-auto, and the same forh-*. These are percentages of the parent.mw-100stops an element growing wider than its parent, andmin-vh-100makes a section at least as tall as the screen. - Overflow:
overflow-autoadds scrollbars only when needed;overflow-hiddenclips the content. - Visibility for screen readers:
visually-hiddenhides text on screen but keeps it for screen readers, useful for icon-only buttons.
Borders, rounded corners and shadows
Add border for a 1px border on all sides, or border-top, border-end and so on for one side. Remove one with border-0 or border-bottom-0. Colour it with border-primary or border-danger-subtle, and thicken it with border-1 to border-5.
rounded gives the standard corner radius, rounded-0 to rounded-5 choose from a scale, rounded-circle makes a circle (on a square element) and rounded-pill makes capsule shapes. For depth, use shadow-sm, shadow or shadow-lg, and shadow-none to remove one.
Position utilities
Position classes match the CSS position property: position-relative, position-absolute, position-fixed and position-sticky. Edge classes place an element: top-0, top-50, top-100, and the same for bottom, start and end. translate-middle shifts the element back by half its own size, so its centre sits exactly on the chosen point. This is the standard way to put a small badge on the corner of a button or avatar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A profile tile built only with utilities</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
<div class="d-flex align-items-center gap-3 p-3 border rounded-3 shadow-sm" style="max-width: 420px;">
<div class="position-relative">
<div class="rounded-circle text-bg-primary d-flex align-items-center justify-content-center fs-4 fw-bold" style="width: 64px; height: 64px;">KS</div>
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-2 border-white rounded-circle">
<span class="visually-hidden">Online</span>
</span>
</div>
<div>
<h2 class="h5 mb-0">Karthik Subramanian</h2>
<p class="mb-0 text-body-secondary">Mobile developer, Bengaluru</p>
</div>
</div>
<div class="mt-4 w-75 p-2 bg-body-tertiary border">w-75: three quarters of the container</div>
<div class="mt-2 w-50 p-2 bg-body-tertiary border">w-50: half</div>
<div class="mt-4 border rounded overflow-auto p-2" style="max-height: 90px;">
<p class="mb-1">Day 1: Thanjavur Big Temple</p>
<p class="mb-1">Day 2: Kumbakonam temples</p>
<p class="mb-1">Day 3: Darasuram</p>
<p class="mb-1">Day 4: Gangaikonda Cholapuram</p>
<p class="mb-0">Day 5: Return to Chennai</p>
</div>
</div>
</body>
</html>The green dot is an empty span positioned on the avatar’s top-right corner. Its visually-hidden text means screen reader users also learn that Karthik is online. The scrolling list uses overflow-auto with a maximum height from a small inline style, because Bootstrap has no utility for arbitrary heights.
When to use utilities and when to write CSS
Utilities are perfect for one-off adjustments and small layouts. They are also marked !important, so a utility always wins over the component’s own styles. That is deliberate: when you write mb-0, you want it to apply.
But if you find yourself repeating the same ten classes on every card, that is a sign to create your own class in a stylesheet, or a reusable template or component. HTML with a very long class list is hard to read and hard to change consistently. A good rule is: utilities for adjustments, components and your own CSS for repeated patterns. If you want to understand what each class is doing, the CSS Box Model lesson explains margin, border and padding.
Watch out: Do not use Bootstrap 4 spacing names. ml-*, mr-*, pl-* and pr-* were renamed to ms-*, me-*, ps-* and pe-* in Bootstrap 5, and float-left/float-right became float-start/float-end.