Bootstrap is the most popular HTML, CSS, and JavaScript framework for building responsive, mobile-first web applications, originally developed by Twitter and maintained as an open-source project. It provides a comprehensive 12-column grid system, extensive pre-built components, and powerful utility classes that accelerate development while ensuring consistent, professional design across all devices. Key to effective Bootstrap usage is understanding that utility classes trump custom CSS in most scenarios — combining them strategically creates flexible, maintainable layouts without writing verbose stylesheets, while the framework's breakpoint-driven responsive approach ensures seamless adaptation from mobile phones to ultra-wide displays. As of 2026, Bootstrap 5.3.x is the current stable version, introducing color modes (dark/light theming), new utility APIs, and a richer set of helpers.
What This Cheat Sheet Covers
This topic spans 47 focused tables and 453 indexed concepts, 141 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Grid System Fundamentals
The grid is the backbone of every Bootstrap layout: a container wraps your content, rows hold columns, and columns divide the available width into twelve flexible units. Master the container → row → col nesting plus offsets and gutters here, and most page layouts fall into place without a line of custom CSS.
| Class | Example | Description | |
|---|---|---|---|
<div class="container"> | • Creates a responsive fixed-width container that centers content • max-width changes at each breakpoint. | ||
<div class="container-fluid"> | Creates a full-width container spanning 100% of viewport width at all breakpoints. | ||
<div class="container-md"> | Container is 100% width until specified breakpoint (sm, md, lg, xl, xxl), then becomes fixed-width. | ||
<div class="row"> | • Creates a horizontal group of columns using flexbox • applies negative margins to offset column padding. | ||
<div class="col"> | Creates an equal-width column that automatically shares available space with sibling columns. | ||
<div class="col-8"> | • Creates a column spanning specified number of grid units (1–12) • col-6 occupies half the row. | ||
<div class="col-md-6"> | • Column width applies only at specified breakpoint and above • stacks full-width below for mobile-first design. | ||
<div class="col-auto"> | • Column takes only the space its content needs • useful for buttons or icons that shouldn't stretch. | ||
<div class="col-4 offset-2"> | • Adds left margin equal to specified columns • pushes column right by skipping grid units. | ||
<div class="row g-3"> | Sets both horizontal and vertical gutters between columns using scale 0–5. | ||
<div class="row gx-4"> | Controls horizontal gutters only (column-gap) while leaving vertical spacing at default. | ||
<div class="row gy-2"> | Controls vertical gutters only (row-gap) between wrapped column rows. | ||
<div class="col order-last"> | Reorders columns visually with order-first, order-last, or order-{1-5} without changing DOM order. |