Code Reference

Bootstrap 5 Cheat Sheet

Searchable quick reference for every Bootstrap 5 utility class and component. Whether you’re customising a Canvas HTML Template section or building a Bootstrap 5 layout from scratch, find the right class instantly.

Grid System

.containerResponsive fixed-width container

.container-fluidFull-width container

.container-{sm|md|lg|xl|xxl}Responsive breakpoint containers

.rowRow wrapper for columns

.colEqual-width column

.col-{1-12}Fixed column width (1–12)

.col-{sm|md|lg|xl|xxl}-{1-12}Responsive column width

.col-autoColumn sized to content

.g-{0-5}Row + column gutters

.gx-{0-5}Horizontal gutters

.gy-{0-5}Vertical gutters

.offset-{1-11}Column offset

.order-{first|last|0-5}Column order

Flexbox Utilities

.d-flexDisplay flex

.d-inline-flexDisplay inline-flex

.flex-rowFlex direction row

.flex-columnFlex direction column

.flex-row-reverseFlex direction row-reverse

.flex-column-reverseFlex direction column-reverse

.flex-wrapFlex wrap

.flex-nowrapFlex no-wrap

.flex-grow-0 / .flex-grow-1Flex grow

.flex-shrink-0 / .flex-shrink-1Flex shrink

.justify-content-startJustify content start

.justify-content-endJustify content end

.justify-content-centerJustify content center

.justify-content-betweenJustify content space-between

.justify-content-aroundJustify content space-around

.justify-content-evenlyJustify content space-evenly

.align-items-startAlign items start

.align-items-endAlign items end

.align-items-centerAlign items center

.align-items-baselineAlign items baseline

.align-items-stretchAlign items stretch

.align-self-{start|end|center|baseline|stretch}Align self for individual items

.gap-{0-5}Gap between flex/grid items

Spacing

.m-{0-5}Margin all sides (0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem)

.mt / .mb / .ms / .me-{0-5}Margin top / bottom / start / end

.mx-{0-5}Margin horizontal (left + right)

.my-{0-5}Margin vertical (top + bottom)

.m-auto / .mx-auto / .my-autoAuto margin

.p-{0-5}Padding all sides

.pt / .pb / .ps / .pe-{0-5}Padding top / bottom / start / end

.px-{0-5}Padding horizontal

.py-{0-5}Padding vertical

.gap-{0-5}Gap (flex/grid)

.row-gap-{0-5}Row gap

.column-gap-{0-5}Column gap

Typography

.display-{1-6}Large display headings

.h1 - .h6Heading utility classes

.leadLarger intro paragraph

.text-start / .text-center / .text-endText alignment

.text-{sm|md|lg}-{start|center|end}Responsive text alignment

.text-wrap / .text-nowrapText wrapping

.text-truncateTruncate with ellipsis

.text-uppercase / .text-lowercase / .text-capitalizeText transform

.fw-bold / .fw-bolderFont weight bold

.fw-semiboldFont weight semi-bold (600)

.fw-normal / .fw-light / .fw-lighterFont weight variants

.fst-italic / .fst-normalFont style italic / normal

.text-decoration-none / .text-decoration-underlineText decoration

.lh-1 / .lh-sm / .lh-base / .lh-lgLine height

.font-monospaceMonospace font

.smallSmaller text (85%)

.markHighlighted text

.blockquoteBlockquote styling

.blockquote-footerBlockquote citation

Colors

.text-primary / .text-secondaryText primary / secondary color

.text-success / .text-dangerText success / danger color

.text-warning / .text-infoText warning / info color

.text-light / .text-darkText light / dark color

.text-mutedMuted text (gray)

.text-white / .text-blackText white / black

.text-bodyDefault body text color

.bg-primary / .bg-secondaryBackground primary / secondary

.bg-success / .bg-dangerBackground success / danger

.bg-warning / .bg-infoBackground warning / info

.bg-light / .bg-dark / .bg-whiteBackground light / dark / white

.bg-transparentTransparent background

.bg-gradientApply gradient to background

.border-primary / .border-secondaryBorder color variants

.link-primary / .link-secondaryColored link utilities

Display

.d-noneDisplay none

.d-blockDisplay block

.d-inlineDisplay inline

.d-inline-blockDisplay inline-block

.d-flexDisplay flex

.d-inline-flexDisplay inline-flex

.d-gridDisplay grid

.d-table / .d-table-cellDisplay table variants

.d-{sm|md|lg|xl|xxl}-{value}Responsive display (e.g. .d-md-none)

.d-print-none / .d-print-blockPrint display utilities

.visible / .invisibleVisibility toggle

.opacity-{0|25|50|75|100}Opacity utility

Buttons

.btnBase button class (required)

.btn-primary / .btn-secondarySolid primary / secondary button

.btn-success / .btn-dangerSolid success / danger button

.btn-warning / .btn-infoSolid warning / info button

.btn-light / .btn-darkSolid light / dark button

.btn-linkLink-style button

.btn-outline-primaryOutline primary button

.btn-outline-{variant}Outline variants (secondary, success, etc.)

.btn-sm / .btn-lgSmall / large button size

.btn-closeClose/dismiss button

.disabledDisabled state

.activeActive/pressed state

.btn-groupGroup buttons together

.btn-group-sm / .btn-group-lgSized button group

.btn-toolbarCombine multiple groups

Common Components

.card / .card-bodyCard container and body

.card-title / .card-text / .card-img-topCard content elements

.card-header / .card-footerCard header and footer

.card-group / .card-deckCard grouping

.navbar / .navbar-expand-{sm|md|lg|xl}Navbar base + responsive expand

.navbar-brand / .navbar-togglerNavbar brand and toggler

.navbar-nav / .nav-item / .nav-linkNavbar navigation links

.navbar-dark / .navbar-lightNavbar color scheme

.modal / .modal-dialog / .modal-contentModal structure

.modal-header / .modal-body / .modal-footerModal sections

.modal-sm / .modal-lg / .modal-xlModal sizes

.badgeBadge / pill label

.badge bg-{variant}Colored badge

.rounded-pillPill-shaped badge

.alert / .alert-{variant}Alert box

.alert-dismissible / .fade / .showDismissible alert

.list-group / .list-group-itemList group container and items

.list-group-item-actionClickable list group item

.list-group-item-{variant}Colored list group item

.list-group-flushRemove outer borders from list group

.list-group-numberedNumbered list group

What is Bootstrap 5?

Bootstrap 5 is the world’s most popular open-source CSS framework, providing a comprehensive set of utility classes, grid system, and pre-built components. Released in May 2021, it removed the jQuery dependency that defined Bootstrap 3 and 4, resulting in a significantly faster and more modern framework. The Canvas HTML Template is built on Bootstrap 5, meaning every layout, card, navbar, and modal in Canvas uses Bootstrap 5 utilities under the hood.

The utility-first approach means you can control spacing, typography, colours, display, and flexbox behaviour by applying classes directly in HTML — without writing custom CSS. For example, .d-flex.align-items-center.gap-3 creates a flex row with centred items and a gap, purely with classes.

Compared to Bootstrap 4, the key changes are: left/right replaced with start/end for RTL support (.ms-3 instead of .ml-3), new .gap-* utilities, a new xxl breakpoint, and expanded color and opacity utilities.

When working with Canvas HTML Template pages generated by Canvas Builder, you have the full Bootstrap 5 utility toolkit available. Use this cheatsheet to quickly find the class for any layout task — from centering content to building responsive grids to applying spacing.

How to use this cheatsheet

1
Use the search bar at the top to find any class by name or description — e.g. search 'center' to find text alignment and flex centering classes.
2
Browse sections by category: Grid System, Flexbox, Spacing, Typography, Colors, Display, Buttons, and Components.
3
Each card shows the class name in violet monospace font and its description on the right.
4
Copy the class name and paste directly into your Canvas HTML Template element's class attribute.
5
Combine utilities freely — e.g. <div class='d-flex align-items-center justify-content-between gap-3 py-4'>.
6
Use responsive prefixes like col-md-6 or d-lg-none to control behaviour at specific breakpoints.

Most commonly used utilities

Category	Class	What it does
Display	.d-flex	Enables flexbox on any element
Display	.d-none / .d-md-block	Hide on all / show from md breakpoint up
Flex	.align-items-center	Vertically centres flex children
Flex	.justify-content-between	Spreads flex children to edges
Spacing	.py-5	Adds 3rem vertical padding (top + bottom)
Spacing	.mx-auto	Centres a block horizontally with auto margins
Typography	.fw-bold / .fw-semibold	Font weight 700 / 600
Typography	.text-muted	Gray text colour (secondary)
Grid	.col-md-6	Half-width column from 768px up
Grid	.g-4	1.5rem gap between all grid items
Colors	.bg-dark / .text-white	Dark background with white text
Buttons	.btn.btn-primary	Solid blue primary button

Frequently Asked Questions

What are the key differences between Bootstrap 5 and Bootstrap 4?

Bootstrap 5 dropped jQuery as a dependency, making it lighter and faster. It replaced .left/.right with .start/.end for RTL support (e.g. .ms-3 instead of .ml-3). It added new utilities like .gap, .opacity, and expanded the color palette. The grid gained a new xxl breakpoint. Navbar no longer requires .navbar-expand-* on every breakpoint. The Canvas HTML Template is built on Bootstrap 5.

What is the Bootstrap 5 CDN link?

The Bootstrap 5 CDN links are: CSS: link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' and JS: script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'. The Canvas HTML Template includes its own compiled Bootstrap 5 build, so you should not add the CDN separately to avoid conflicts.

Can I use Bootstrap 5 utility classes without loading the full Bootstrap CSS?

Yes. You can use Bootstrap 5's Sass source to compile a utilities-only build, or use the standalone @bootstrap/utilities package. Alternatively, PurgeCSS can strip unused Bootstrap classes from your production build. In Canvas HTML Template projects, the full Bootstrap 5 CSS is already included and tree-shaking is not required — all utility classes are available.

What are the Bootstrap 5 grid breakpoints?

Bootstrap 5 has six breakpoints: xs (<576px, no infix), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px), xxl (>=1400px). Column classes follow the pattern .col-{breakpoint}-{1-12}. Breakpoints are mobile-first — a .col-md-6 applies from 768px and up. The Canvas HTML Template uses these same breakpoints throughout its layout system.

Related tools

Bootstrap Grid Calculator

Calculate column widths and gutters for Bootstrap 5 grids.

CSS Flexbox Generator

Build flexbox layouts visually with live CSS output.

Bootstrap to Tailwind

Convert Bootstrap 5 HTML to Tailwind CSS equivalents.

Ready to build a full HTML layout?

Canvas Builder generates production-ready Canvas HTML Template pages with Bootstrap 5 — no manual class hunting required.

Try Canvas Builder

Skip the lookup — just build

Canvas Builder writes production Bootstrap 5 markup for a whole page from one prompt.

Build a full site from this