Code Reference
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.
.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.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.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.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.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.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.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.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 groupBootstrap 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.
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.
Browse sections by category: Grid System, Flexbox, Spacing, Typography, Colors, Display, Buttons, and Components.
Each card shows the class name in teal monospace font and its description on the right.
Copy the class name and paste directly into your Canvas HTML Template element's class attribute.
Combine utilities freely — e.g. <div class='d-flex align-items-center justify-content-between gap-3 py-4'>.
Use responsive prefixes like col-md-6 or d-lg-none to control behaviour at specific breakpoints.
| 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 |
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.
The Bootstrap 5 CDN links are: CSS: <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'> and JS: <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>. The Canvas HTML Template includes its own compiled Bootstrap 5 build, so you should not add the CDN separately to avoid conflicts.
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.
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.
Canvas Builder generates production-ready Canvas HTML Template pages with Bootstrap 5 — no manual class hunting required.
Try Canvas Builder