Bootstrap Reference

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Welcome to the Bootstrap reference. Bootstrap is the most widely used CSS/JS framework for building responsive, mobile-first sites: a 12-column grid, a large library of pre-styled components, an extensive utility-class system, and a vanilla-JavaScript behavior layer for interactive components. This section is organized by topic, from installation through the grid, content basics, forms, components, utilities, and layout helpers, to the Sass-based customization and JavaScript APIs that let you adapt Bootstrap to a real project — so you can jump straight to what you need, or work through it top to bottom as a refresher.

If you are new to Bootstrap, read Getting Started and The Grid System first, then Customization once you’re ready to theme it for your own project.

What’s covered

Getting Started

Getting Started — installation via CDN, npm/yarn, or downloaded source; the minimal starter template; browser/OS support and accessibility basics.

Grid

The Grid System — containers, rows and columns, the 12-column layout logic, breakpoints, sizing/offsetting/ordering/nesting, and the nesting-containers antipattern.

Content Basics

Typography — headings, display headings, text utilities, and lead paragraphs.
Reboot — Bootstrap’s CSS reset/normalization layer and how it relates to plain CSS reset approaches.
Images — responsive images, thumbnails, and figures.
Tables — striped, bordered, hover, and responsive table variants.
Colors — the theme color system and text/background/border color utilities.

Forms

Forms — form controls, layout options, input groups, and floating labels.
Forms: Validation — validation states and feedback, browser vs. custom validation.

Components

Navigation Components — navbars, breadcrumbs, and pagination.
Content Components — cards, list groups, and badges.
Feedback Components — alerts, modals, and toasts.
Interactive Components — dropdowns, accordions, and carousels.
Buttons — button variants, sizes, states, and button groups.
Tooltips & Popovers — Popper.js-positioned tooltips and popovers.

Utilities

Utilities — spacing, color/background/border, flexbox/display, and position/sizing/shadow utility classes.
The Utility API — the Sass-based $utilities map for generating custom utility classes.

Layout Helpers

Layout Helpers — Flexbox/Grid CSS integration, responsive visibility/display classes, and z-index/positioning helpers.

Customization

Customization — Sass variables and maps for theming, trimmed custom builds, and Bootstrap 5’s --bs-* CSS custom properties.

JavaScript Behavior

JavaScript Behavior — data attributes vs. the JavaScript API, the vanilla-JS + Popper.js dependency model, and component events.

Accessibility

Accessibility — built-in ARIA attributes, keyboard navigation, and color contrast guidance.

Cheat Sheet

Cheat sheet — a one-page, downloadable PDF summary of the essentials above for quick memorization.

Bibliography

Bootstrap — the official project site, and the primary reference for this entire section. See in particular the Bootstrap documentation for the full component and utility reference, and Popper.js for the positioning engine behind dropdowns, tooltips, and popovers.