Bootstrap 5 Cheat Sheet: All the Classes You Need

This Bootstrap 5 cheat sheet lists the classes you use most, grouped by job: layout, grid, spacing, flexbox, display, text, colors, borders, sizing, position, and the main components. Each row gives the class, what it does, and a short example. It covers Bootstrap 5.3.9. Responsive classes take a breakpoint infix, sm, md, lg, xl, or xxl, as in d-md-none or col-lg-6, and apply from that width up.

Breakpoints

Infix	Applies from	Example
none	0	col-6, d-none
sm	576px	col-sm-6
md	768px	d-md-flex
lg	992px	col-lg-4
xl	1200px	text-xl-start
xxl	1400px	container-xxl

More in the breakpoints guide.

Layout and containers

Class	What it does
container	Centered, fixed-width container that steps up at each breakpoint
container-fluid	Full-width container
container-md	Full width until md, then fixed width
row	Flex row for grid columns, with negative margins for gutters
col, col-6, col-md-4	Columns: equal width, 6 of 12, or 4 of 12 from md
col-auto	Column as wide as its content
row-cols-1 row-cols-md-3	Set columns per row from the row
offset-md-2	Push a column 2 columns right
order-first, order-last, order-md-2	Reorder columns
g-0 to g-5, gx-3, gy-3	Gutters between columns

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">One</div>
    <div class="col-12 col-md-6 col-lg-4">Two</div>
    <div class="col-12 col-lg-4">Three</div>
  </div>
</div>

The grid guide and container guide go further.

Spacing

The format is {property}{side}-{size}, with an optional breakpoint: m-md-3.

Part	Values
Property	m margin, p padding
Side	t top, b bottom, s start (left), e end (right), x left and right, y top and bottom, none for all sides
Size	0 0, 1 0.25rem, 2 0.5rem, 3 1rem, 4 1.5rem, 5 3rem, auto (margin only)

Class	What it does
mt-3	1rem top margin
px-4	1.5rem left and right padding
mx-auto	Center a block that has a width
ms-auto	Push an item to the right in a flex row
mb-0	Remove bottom margin
gap-3	1rem gap between flex or grid children
m-n2	Negative margin (-0.5rem)

See the spacing guide for examples.

Display

Class	What it does
d-none	Hide
d-block, d-inline, d-inline-block	Block, inline, inline-block
d-flex, d-inline-flex	Flex container
d-grid	CSS grid container
d-none d-md-block	Hide on phones, show from md
d-md-none	Show on phones only
d-print-none	Hide when printing
visually-hidden	Hide visually, keep for screen readers

Flexbox

Class	What it does
flex-row, flex-column	Direction
flex-md-row	Column on phones, row from md
justify-content-start, -center, -end, -between, -around, -evenly	Main-axis alignment
align-items-start, -center, -end, -baseline, -stretch	Cross-axis alignment
align-self-center	Align one item
flex-wrap, flex-nowrap	Wrapping
flex-grow-1, flex-shrink-0	Grow and shrink
flex-fill	Items share space equally
align-content-center	Align wrapped lines

<div class="d-flex justify-content-between align-items-center gap-2">
  <span>Logo</span>
  <button class="btn btn-primary">Sign up</button>
</div>

More in the flexbox guide, and to center anything, the centering guide.

Text and typography

Class	What it does
text-start, text-center, text-end	Alignment (also text-md-center)
fw-bold, fw-semibold, fw-normal, fw-light	Font weight
fst-italic	Italic
fs-1 to fs-6	Font size, from largest to smallest
display-1 to display-6	Large headline sizes
h1 to h6	Heading style on any element
lead	Larger intro paragraph
small	Smaller text
text-uppercase, text-lowercase, text-capitalize	Case
text-decoration-none, text-decoration-underline	Underline
text-truncate	Cut off with an ellipsis (needs a width)
text-nowrap, text-wrap, text-break	Wrapping
lh-1, lh-sm, lh-base, lh-lg	Line height
font-monospace	Monospace font
list-unstyled, list-inline	Lists without bullets

The typography guide has the details.

Colors

Class	What it does
text-primary, text-danger, and so on	Text color
bg-primary, bg-light, and so on	Background color
text-bg-primary	Background with a readable text color
bg-primary-subtle, text-primary-emphasis, border-primary-subtle	Soft variants
text-body-secondary	Muted text (replaces text-muted)
bg-body-tertiary	Light gray section background
link-primary	Colored link
bg-opacity-50, text-opacity-75	Transparency
bg-gradient	Subtle gradient

Theme colors are primary, secondary, success, info, warning, danger, light, and dark. All hex values are in the Bootstrap colors reference.

Borders and shadows

Class	What it does
border, border-top, border-end	Add a border
border-0, border-top-0	Remove a border
border-primary, border-2	Border color and width (1 to 5)
rounded, rounded-3, rounded-pill, rounded-circle	Corner radius
rounded-top, rounded-0	Round one side, or none
shadow-sm, shadow, shadow-lg, shadow-none	Box shadow

See borders and shadows.

Sizing

Class	What it does
w-25, w-50, w-75, w-100, w-auto	Width as a percentage of the parent
h-25 to h-100, h-auto	Height
mw-100, mh-100	Max width or height 100%
vw-100, vh-100	Full viewport width or height
min-vh-100	At least the viewport height
ratio ratio-16x9	Fixed aspect ratio box for video or embeds

Position

Class	What it does
position-relative, -absolute, -fixed, -sticky	Position
top-0, bottom-0, start-0, end-0, top-50, start-100	Offsets (0, 50, 100%)
translate-middle	Center on the offset point
fixed-top, fixed-bottom	Fix to the top or bottom of the viewport
sticky-top	Stick to the top while scrolling
z-0, z-1, z-2, z-3	Stacking order
float-start, float-end, clearfix	Floats
overflow-hidden, overflow-auto	Overflow
stretched-link	Make a whole card clickable

The position guide shows these in real layouts.

Images

Class	What it does
img-fluid	Scale down to fit the parent
img-thumbnail	Bordered, rounded thumbnail
object-fit-cover	Crop to fill the box
figure, figure-img, figure-caption	Image with caption

See Bootstrap images.

Buttons

Class	What it does
btn btn-primary	Solid button, any theme color
btn btn-outline-primary	Outline button
btn btn-link	Button styled as a link
btn-sm, btn-lg	Sizes
w-100	Full-width button
btn-group	Join buttons together
btn-close	Close (x) button
disabled (on links), disabled attribute (on buttons)	Disabled state

More in the buttons guide.

Forms

Class	What it does
form-label	Label
form-control	Text input or textarea
form-control-sm, form-control-lg	Sizes
form-select	Select menu
form-check, form-check-input, form-check-label	Checkbox or radio
form-switch	Toggle switch (on the form-check)
form-range	Range slider
form-floating	Floating label wrapper
input-group, input-group-text	Input with add-ons
form-text	Help text
is-valid, is-invalid	Validation state
valid-feedback, invalid-feedback	Validation message
needs-validation, was-validated	Validation on submit

See the forms guide and the input group guide.

Components

Component	Main classes
Alert	alert alert-success alert-dismissible fade show
Badge	badge text-bg-primary rounded-pill
Card	card, card-body, card-title, card-text, card-img-top, card-header, card-footer
Navbar	navbar navbar-expand-lg bg-body-tertiary, navbar-brand, navbar-toggler, collapse navbar-collapse, navbar-nav, nav-link
Nav and tabs	nav nav-tabs, nav nav-pills, nav-item, nav-link active
Dropdown	dropdown, dropdown-toggle, dropdown-menu, dropdown-item
Modal	modal fade, modal-dialog modal-dialog-centered, modal-content, modal-header, modal-body, modal-footer
Accordion	accordion, accordion-item, accordion-button, accordion-collapse collapse
List group	list-group, list-group-item, list-group-item-action, list-group-flush
Table	table table-striped table-hover table-bordered, table-responsive
Pagination	pagination, page-item, page-link
Progress	progress, progress-bar
Spinner	spinner-border, spinner-grow, spinner-border-sm
Breadcrumb	breadcrumb, breadcrumb-item active (guide)
Offcanvas	offcanvas offcanvas-start, offcanvas-header, offcanvas-body
Toast	toast, toast-header, toast-body, toast-container
Placeholder	placeholder, placeholder-glow, col-6

Interactive components need the JavaScript bundle and use data-bs-toggle and data-bs-target attributes, such as data-bs-toggle="modal". Every component has a full guide in the guides section.

Helpers

Class	What it does
clearfix	Clear floats
hstack, vstack	Quick horizontal or vertical flex stack (with gap-*)
vr	Vertical divider in a flex row
text-truncate	Single-line ellipsis
focus-ring	Visible focus outline on custom elements
icon-link	Link with an icon, aligned
user-select-none, pe-none	Disable text selection or pointer events

Bootstrap 4 to 5 class changes

Bootstrap 4	Bootstrap 5
ml-*, mr-*, pl-*, pr-*	ms-*, me-*, ps-*, pe-*
float-left, float-right	float-start, float-end
text-left, text-right	text-start, text-end
font-weight-bold	fw-bold
font-italic	fst-italic
badge-primary	text-bg-primary
badge-pill	rounded-pill
no-gutters	g-0
form-group, form-row	mb-3, row g-3
custom-select	form-select
custom-control custom-checkbox	form-check
sr-only	visually-hidden
close	btn-close
data-toggle, data-target	data-bs-toggle, data-bs-target
text-muted (5.3)	text-body-secondary

Bootstrap 6, now in alpha, moves breakpoints to a prefix, so d-md-none becomes md:d-none. The Bootstrap 6 alpha guide lists what changes.

FAQ

What are the most used Bootstrap 5 classes?

The grid (container, row, col-md-6), spacing (mt-3, px-4, mx-auto), flexbox (d-flex, justify-content-between, align-items-center), display (d-none d-md-block), text (text-center, fw-bold), colors (text-primary, bg-light), and components such as btn btn-primary, card, navbar, and form-control.

What does mt-3 mean in Bootstrap?

mt-3 adds a top margin of 1rem (16px by default). m is margin, t is top, and 3 is the size on a scale from 0 to 5, where 1 is 0.25rem, 2 is 0.5rem, 3 is 1rem, 4 is 1.5rem, and 5 is 3rem.

What does col-md-6 mean in Bootstrap?

From the md breakpoint (768px) up, the column takes 6 of the 12 grid columns, half the row. Below 768px it stacks at full width.

How do I hide an element on mobile in Bootstrap 5?

Use d-none d-md-block: hidden by default, shown as a block from 768px. To show something only on phones, use d-md-none.

What replaced ml and mr classes in Bootstrap 5?

ms-* (margin start) and me-* (margin end) replaced ml-* and mr-*, and ps-* and pe-* replaced pl-* and pr-*. Start and end follow the text direction, so they also work in right-to-left layouts.

Is there a printable Bootstrap 5 cheat sheet?

You can print this page or save it as a PDF from your browser’s Print dialog. The full reference is the official documentation at getbootstrap.com.