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>
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
