Bootstrap Cheat Sheet
A reference for Bootstrap 5's grid system, components, utility classes, and JavaScript plugins for rapidly building responsive layouts.
2 PagesBeginnerMar 2, 2026
Grid System
Responsive 12-column grid with breakpoint-specific column classes.
html
<div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-4">Column 1</div> <div class="col-12 col-md-6 col-lg-4">Column 2</div> <div class="col-12 col-lg-4">Column 3</div> </div></div><!-- breakpoints: sm >=576px, md >=768px, lg >=992px, xl >=1200px, xxl >=1400px -->
Buttons & Cards
Two of the most commonly used Bootstrap components.
html
<button class="btn btn-primary">Primary</button><button class="btn btn-outline-danger btn-sm">Delete</button><div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some text.</p> <a href="#" class="btn btn-primary">Go</a> </div></div>
Utility Classes
Small, single-purpose classes for common styling needs.
- d-flex / d-none / d-block- control an element's display property
- justify-content-center / align-items-center- flexbox alignment utilities
- m-3 / p-3 / mt-2 / px-4- margin/padding spacing scale from 0-5, plus 'auto'
- text-center / text-muted / fw-bold- text alignment, color, and weight helpers
- bg-primary / bg-light / text-white- background and text color utilities tied to the theme palette
- w-100 / h-100- set width/height to 100%
- rounded / rounded-circle / shadow- border-radius and box-shadow helpers
- visually-hidden- hides an element visually while keeping it accessible to screen readers
JS Components via Data Attributes
Modal and collapse triggered declaratively without writing JS.
html
<button data-bs-toggle="modal" data-bs-target="#exampleModal">Open Modal</button><div class="modal fade" id="exampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Title</h5> <button class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Content here.</div> </div> </div></div><!-- Collapse --><button data-bs-toggle="collapse" data-bs-target="#collapseExample">Toggle</button><div class="collapse" id="collapseExample">Collapsible content</div>
Sass Variable Overrides & Theming
Customizing Bootstrap's design tokens before compiling instead of overriding compiled CSS with !important.
scss
// custom.scss -- override defaults BEFORE importing Bootstrap$primary: #7c3aed;$border-radius: 0.75rem;$font-family-sans-serif: 'Inter', sans-serif;$enable-negative-margins: true;@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/maps";@import "bootstrap/scss/mixins";@import "bootstrap/scss/root";@import "bootstrap";// only pull in the components you actually use to cut bundle size:// @import "bootstrap/scss/reboot", "bootstrap/scss/grid", "bootstrap/scss/buttons";
Runtime Theming via CSS Variables
Bootstrap 5.3+ exposes its color system as CSS custom properties, enabling theme switching without recompiling Sass.
html
<html data-bs-theme="dark"> <!-- toggles the entire built-in dark theme palette --></html><style> .card { --bs-card-bg: var(--bs-tertiary-bg); --bs-border-color: var(--bs-primary); }</style><script> document.documentElement.setAttribute('data-bs-theme', matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')</script>
Programmatic JS API
Controlling components imperatively via the exported ES module classes instead of only data attributes.
javascript
import { Modal, Tooltip, Toast } from 'bootstrap'const modalEl = document.getElementById('exampleModal')const modal = Modal.getOrCreateInstance(modalEl)modal.show()modalEl.addEventListener('hidden.bs.modal', () => console.log('modal closed'))document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(el => new Tooltip(el, { trigger: 'hover', placement: 'top' }))
Grid Nesting, Offsets & Reordering
Advanced grid techniques for asymmetric layouts beyond simple equal-width columns.
html
<div class="row"> <div class="col-md-8 order-md-2">Main (visually second on md+)</div> <div class="col-md-4 order-md-1">Sidebar (visually first on md+)</div></div><div class="row"> <div class="col-md-6 offset-md-3">Centered 6-wide column</div></div><div class="row"> <div class="col-6"> <div class="row g-2"><div class="col-6">Nested A</div><div class="col-6">Nested B</div></div> </div></div>
Accessibility & Form Validation Hooks
Attributes and classes Bootstrap relies on to make components usable with assistive tech and native form validation.
- was-validated + :invalid/:valid- add to a <form> after JS validation runs so Bootstrap shows .invalid-feedback/.valid-feedback
- aria-live regions on toasts- toasts should include role="alert" aria-live="assertive" aria-atomic="true" for screen readers
- data-bs-focus / focus trap- Modal automatically traps focus and returns it to the trigger element on close
- visually-hidden-focusable- hides content visually but reveals it when it (or a descendant) receives keyboard focus, e.g. skip links
- aria-current="page"- mark the active item in .nav / .pagination / .breadcrumb so assistive tech announces it
- reduced-motion respect- Bootstrap's .fade/.collapsing transitions honor prefers-reduced-motion automatically via CSS
Pro Tip
Bootstrap 5 dropped jQuery, but its JS components (modal, tooltip, dropdown) still depend on Popper -- include bootstrap.bundle.min.js, not the plain bootstrap.min.js, unless you are importing Popper and the components separately yourself.
Was this cheat sheet helpful?
Explore Topics
#Bootstrap#BootstrapCheatSheet#WebDevelopment#Beginner#GridSystem#ButtonsCards#UtilityClasses#JSComponentsViaDataAttributes#OOP#CheatSheet#SkillVeris
