Utility classes
Utility classes each do one small job, like adding padding or centring text. Combining them lets you style most things without writing any CSS.
Spacing
<div class="bg-light border">
<div class="m-3 p-3 bg-primary text-white">m-3 p-3</div>
<div class="mx-5 py-2 bg-success text-white">mx-5 py-2</div>
<div class="mt-4 ms-auto p-2 bg-danger text-white" style="width: 12rem">mt-4 ms-auto</div>
</div>The names follow a pattern: property, side, size.
| Part | Options |
|---|---|
| property | m margin, p padding |
| side | t top, b bottom, s start (left), e end (right), x left and right, y top and bottom, nothing for all sides |
| size | 0 to 5 (from 0 up to 3rem), or auto |
ms-auto pushes an element to the right, the way margin-left: auto does.
Colours
<p class="text-primary">text-primary</p>
<p class="text-success fw-semibold">text-success</p>
<p class="text-danger">text-danger</p>
<p class="p-2 bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded">a soft warning: bg-*-subtle with text-*-emphasis</p>
<p class="p-2 bg-dark text-white rounded">bg-dark text-white</p>The theme colours are primary, secondary, success, danger, warning, info, light and dark. Each can be used as text-*, bg-*, border-*, bg-*-subtle and text-*-emphasis.
Borders, corners and shadows
<div class="d-flex flex-wrap gap-3 p-3">
<div class="p-3 border">border</div>
<div class="p-3 border border-2 border-primary rounded">rounded</div>
<div class="p-3 bg-info-subtle rounded-pill">rounded-pill</div>
<img src="https://picsum.photos/seed/face2/120/120" class="rounded-circle" width="60" height="60" alt="Avatar">
<div class="p-3 shadow-sm rounded">shadow-sm</div>
<div class="p-3 shadow rounded">shadow</div>
<div class="p-3 shadow-lg rounded">shadow-lg</div>
</div>Flexbox
<div class="d-flex justify-content-between align-items-center p-3 bg-light border rounded">
<strong>Order #1042</strong>
<span class="badge text-bg-success">Delivered</span>
</div>
<div class="d-flex flex-column flex-md-row gap-2 mt-3">
<div class="p-3 bg-primary-subtle border flex-fill">one</div>
<div class="p-3 bg-primary-subtle border flex-fill">two</div>
<div class="p-3 bg-primary-subtle border flex-fill">three</div>
</div>d-flex turns flexbox on, and every flexbox property has a class: justify-content-*, align-items-*, flex-column, gap-*, flex-fill. The second row stacks vertically on narrow screens and becomes a row from md up.
Display, and responsive versions
<div class="p-3 bg-success-subtle border d-none d-md-block">I appear from md (768px) up</div>
<div class="p-3 bg-danger-subtle border d-md-none">I appear only below md</div>
<span class="d-inline-block p-2 bg-light border">inline-block</span>Most utilities have responsive versions, written as class-breakpoint-value. d-none d-md-block means hidden by default, shown as a block from md up. Bootstrap is mobile first: a breakpoint class applies from that width upwards.
Sizing and text
<div class="bg-light border mb-2"><div class="w-25 bg-primary text-white p-1">w-25</div></div>
<div class="bg-light border mb-2"><div class="w-50 bg-primary text-white p-1">w-50</div></div>
<div class="bg-light border mb-3"><div class="w-75 bg-primary text-white p-1">w-75</div></div>
<p class="text-center text-uppercase fw-bold">centred, uppercase, bold</p>
<p class="text-truncate border p-1" style="max-width: 220px">A very long sentence that will be cut off with an ellipsis</p>Positioning
<div class="p-4">
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">9</span>
</button>
</div>position-relative on the button, plus position-absolute top-0 start-100 translate-middle on the badge, pins the badge's centre to the button's top-right corner.