BS
Bootstrap 5 Cheat Sheet
The Bootstrap 5.3 classes and attributes from the Bootstrap track, from the grid to dark mode. Every class here exists in Bootstrap 5.3.8; follow the lesson links for full examples you can try.
Setup and naming Lesson
cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css | The CSS file; link it in <head> |
…/[email protected]/dist/js/bootstrap.bundle.min.js | JavaScript for modals, dropdowns, collapse; load before </body> |
npm install [email protected] | Installs it in a project with a build tool |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Required for the responsive classes to work on phones |
sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 | Breakpoint minimum widths in px |
col-md-6 mt-lg-4 d-sm-none | Pattern: thing-breakpoint-value, applies from that width up |
data-bs-toggle="…" data-bs-target="#id" | Attributes that switch on JavaScript components |
Bootstrap 5 does not need jQuery. Old data-toggle attributes must become data-bs-toggle.
Grid system Lesson
container | Centred, fixed max-width at each breakpoint |
container-fluid | Full width at every size |
row | Wraps columns; must be inside a container |
col | Equal-width columns that share the row |
col-6 | Half of the 12 columns, at every size |
col-12 col-md-6 col-lg-4 | Full width, then half from md, a third from lg |
col-auto | Only as wide as its content |
row-cols-1 row-cols-md-3 | Sets the number of columns per row on the row |
offset-md-2 | Pushes a column right by 2 columns from md |
g-4 gx-3 gy-0 | Gutters: space between columns (both, x, y) |
Only columns should be direct children of a row.
Typography and colours Lesson
<h2 class="h4"> | Keeps the h2 level but looks like an h4 |
display-1 … display-6 | Very large hero headings |
lead | A slightly larger intro paragraph |
fs-1 … fs-6 | Font sizes matching h1–h6 |
fw-bold fw-semibold fw-normal fst-italic | Font weight and style |
text-center text-md-start text-end | Text alignment, responsive if needed |
text-uppercase text-truncate | Change case; cut long text with an ellipsis |
text-primary bg-success | Theme colour for text or background |
text-bg-warning | Background plus a readable text colour |
bg-primary-subtle text-primary-emphasis | Soft tinted background with darker text |
text-body-secondary | Muted text; replaces the deprecated text-muted |
list-unstyled list-inline | Lists without bullets, or in a row |
Spacing and utilities Lesson
{m|p}{t|b|s|e|x|y}-{breakpoint}-{size} | Margin/padding pattern; side and breakpoint are optional |
mt-3 px-4 mb-0 | Margin top, padding left and right, margin bottom |
0 · 1 · 2 · 3 · 4 · 5 | Sizes: 0, .25rem, .5rem, 1rem, 1.5rem, 3rem (margins also auto) |
mx-auto | Centres a block that has a width |
d-none d-md-block | Hidden on phones, shown from md up |
w-100 h-50 mw-100 vh-100 | Width and height as % or viewport |
border border-0 border-primary | Add, remove or colour a border |
rounded rounded-pill rounded-circle | Corner shapes |
shadow-sm shadow shadow-lg | Box shadows |
position-relative position-absolute top-0 end-0 | Positioning with offsets |
visually-hidden | Hidden on screen, still read by screen readers |
ratio ratio-16x9 | Keeps an embed at a 16:9 shape |
s and e mean start and end, so they flip in right-to-left languages.
Buttons and badges Lesson
<button class="btn btn-primary"> | Solid button in the primary colour |
btn-outline-danger | Outlined button variant |
btn-lg btn-sm | Larger or smaller buttons |
btn-link | Looks like a link, behaves like a button |
<button class="btn btn-primary" disabled> | Disabled button |
<a class="btn btn-primary disabled" aria-disabled="true"> | Disabled link button (links have no disabled attribute) |
<div class="d-grid gap-2"> | Makes the buttons inside full width |
<div class="btn-group" role="group" aria-label="…"> | Joins buttons into one group |
<input type="checkbox" class="btn-check" id="b1"> | Toggle button; follow it with <label class="btn" for="b1"> |
<span class="badge text-bg-danger">New</span> | Small label or counter |
badge rounded-pill | Pill-shaped badge |
<button class="btn-close" aria-label="Close"> | The × close button |
Cards Lesson
card | The outer box with a border and rounded corners |
card-body | Padded inner area |
card-title card-subtitle card-text | Heading, subheading and text inside the body |
<img class="card-img-top" src="…" alt="…"> | Image at the top of the card |
card-header card-footer | Top and bottom strips |
list-group list-group-flush | A borderless list inside a card |
row row-cols-1 row-cols-md-3 g-4 | A responsive grid of cards |
h-100 | On each card: equal heights in a row |
stretched-link | Makes the whole card clickable through one link |
card-img-overlay | Puts text on top of the card image |
Navbar and navs Lesson
<nav class="navbar navbar-expand-lg bg-body-tertiary"> | Full menu from lg up, collapsed below |
navbar-brand | Site name or logo link |
navbar-toggler + data-bs-toggle="collapse" | The menu button on small screens |
data-bs-target="#mainNav" | Points the toggler at the collapsible part |
<div class="collapse navbar-collapse" id="mainNav"> | The part that hides and shows |
navbar-nav nav-item nav-link | The list of links |
nav-link active + aria-current="page" | Marks the current page |
ms-auto | On the list: pushes links to the right |
data-bs-theme="dark" | On a dark navbar: light links and toggler icon |
sticky-top fixed-top | Sticks when scrolling / always pinned on top |
nav nav-tabs nav nav-pills | Simple tabs or pill navigation |
navbar-dark is deprecated in 5.3 – use data-bs-theme="dark".
Forms Lesson
form-label | Label above a field |
form-control | Text inputs and textareas |
form-text | Small help text under a field |
form-select | Styled <select> |
form-check form-check-input form-check-label | Checkbox or radio with its label |
form-check form-switch + role="switch" | Checkbox shown as a switch |
<input type="range" class="form-range"> | Styled slider |
form-floating | Label floats inside; input first, needs a placeholder |
input-group + input-group-text | Joins text like ₹ or @ to an input |
form-control-lg form-select-sm | Larger or smaller fields |
is-invalid + invalid-feedback | Red field with an error message below |
<form novalidate> + was-validated | Skip browser bubbles; add was-validated on submit to show styles |
Tables and list groups Lesson
<table class="table"> | Basic table styling |
table-striped table-hover | Zebra rows / highlight on hover |
table-bordered table-sm | Borders on all cells / compact cells |
<div class="table-responsive"> | Wrapper that scrolls wide tables sideways |
table-success | Colours a row or cell |
align-middle | Vertically centres cell content |
<ul class="list-group"><li class="list-group-item"> | A bordered list |
list-group-item-action | Hover and focus styles for links and buttons |
active + aria-current="true" | Marks the selected item |
<ol class="list-group list-group-numbered"> | Numbered list group |
list-group-flush | Removes the outer borders and rounded corners |
Modals and alerts Lesson
<div class="alert alert-success" role="alert"> | Coloured message box in the page |
alert-heading alert-link | Title and matching link colour in an alert |
alert-dismissible fade show | Alert the user can close |
data-bs-dismiss="alert" | On a btn-close: closes the alert |
<div class="modal fade" id="confirm" tabindex="-1"> | Modal wrapper; add aria-labelledby |
modal-dialog > modal-content | Positions the box / the box itself |
modal-header modal-body modal-footer | Parts inside modal-content |
data-bs-toggle="modal" data-bs-target="#confirm" | On a button: opens the modal |
data-bs-dismiss="modal" | Closes the modal |
modal-dialog-centered modal-lg | Centred vertically / larger width |
data-bs-backdrop="static" | Clicking outside does not close it |
bootstrap.Modal.getOrCreateInstance(el).show(); | Opens a modal from JavaScript |
Modals, dropdowns and dismissible alerts need bootstrap.bundle.min.js.
Flex and alignment Lesson
d-flex d-inline-flex | Turns on flexbox |
flex-column flex-md-row | Stacked on phones, a row from md up |
justify-content-between | Spreads items along the main axis |
align-items-center | Centres items on the cross axis |
align-self-end | Aligns one item differently |
flex-wrap | Lets items wrap onto new lines |
flex-grow-1 flex-shrink-0 | Fill free space / never shrink |
order-first order-md-2 | Changes visual order (0–5, first, last) |
gap-3 | Space between flex or grid items |
hstack gap-2 vstack gap-3 | Quick horizontal or vertical stacks |
ms-auto | Pushes an item to the end |
Customising and dark mode Lesson
<html lang="en" data-bs-theme="dark"> | Switches the whole page to dark mode |
<div data-bs-theme="light"> | Sets the mode for one part of the page |
bg-body bg-body-tertiary text-body-emphasis | Colours that adapt to light and dark |
bg-light bg-white text-dark | Fixed colours that do not adapt |
--bs-body-font-family: "Poppins", sans-serif; | Changes the page font (set on :root) |
--bs-border-radius: .75rem; | Rounder corners on components |
--bs-link-color-rgb: 10, 122, 61; | Link colour, as three RGB numbers |
.btn-primary { --bs-btn-bg: #0a7a3d; } | Recolours primary buttons (also set hover and border) |
$primary: #0a7a3d; @import "bootstrap/scss/bootstrap"; | Sass: set variables before importing Bootstrap |
[data-bs-theme=dark] { --bs-body-bg: #121212; } | Tunes the dark palette |
Load your own CSS after Bootstrap's so your overrides win.