Bootstrap CSS Framework Cheat Sheet

Updated 2026-04-28

Next Topic: Browser Compatibility Cheat Sheet

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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Grid System FundamentalsTable 2: Responsive BreakpointsTable 3: Spacing UtilitiesTable 4: Display UtilitiesTable 5: Float UtilitiesTable 6: Flexbox UtilitiesTable 7: Typography UtilitiesTable 8: Color UtilitiesTable 9: Link UtilitiesTable 10: Button UtilitiesTable 11: Button Group ComponentTable 12: Border UtilitiesTable 13: Sizing UtilitiesTable 14: Object Fit and Image UtilitiesTable 15: Position UtilitiesTable 16: Shadow UtilitiesTable 17: Overflow UtilitiesTable 18: Opacity and Visibility UtilitiesTable 19: Z-Index UtilitiesTable 20: Navbar ComponentTable 21: Navs and Tabs ComponentTable 22: Card ComponentTable 23: Modal ComponentTable 24: Alert ComponentTable 25: Toast ComponentTable 26: Badge ComponentTable 27: Dropdown ComponentTable 28: Form ControlsTable 29: Input Group ComponentTable 30: Floating LabelsTable 31: Table UtilitiesTable 32: List Group ComponentTable 33: Accordion ComponentTable 34: Progress ComponentTable 35: Spinner ComponentTable 36: Placeholder ComponentTable 37: Tooltip and PopoverTable 38: Breadcrumb and PaginationTable 39: Carousel ComponentTable 40: Offcanvas ComponentTable 41: Collapse ComponentTable 42: Scrollspy ComponentTable 43: Bootstrap HelpersTable 44: Color Modes (Dark / Light Theme)Table 45: Installation and SetupTable 46: Customization ApproachesTable 47: JavaScript Interaction

Table 1: Grid System Fundamentals

Class	Example	Description
container	`<div class="container">`	• Creates a responsive fixed-width container that centers content • max-width changes at each breakpoint.
container-fluid	`<div class="container-fluid">`	Creates a full-width container spanning 100% of viewport width at all breakpoints.
container-{breakpoint}	`<div class="container-md">`	Container is 100% width until specified breakpoint (sm, md, lg, xl, xxl), then becomes fixed-width.
row	`<div class="row">`	• Creates a horizontal group of columns using flexbox • applies negative margins to offset column padding.
col	`<div class="col">`	Creates an equal-width column that automatically shares available space with sibling columns.
col-{number}	`<div class="col-8">`	• Creates a column spanning specified number of grid units (1–12) • `col-6` occupies half the row.
col-{breakpoint}-{number}	`<div class="col-md-6">`	• Column width applies only at specified breakpoint and above • stacks full-width below for mobile-first design.

Table 1: Grid System Fundamentals

Class	Example	Description
container	`<div class="container">`	• Creates a responsive fixed-width container that centers content • max-width changes at each breakpoint.
container-fluid	`<div class="container-fluid">`	Creates a full-width container spanning 100% of viewport width at all breakpoints.
container-{breakpoint}	`<div class="container-md">`	Container is 100% width until specified breakpoint (sm, md, lg, xl, xxl), then becomes fixed-width.
row	`<div class="row">`	• Creates a horizontal group of columns using flexbox • applies negative margins to offset column padding.
col	`<div class="col">`	Creates an equal-width column that automatically shares available space with sibling columns.
col-{number}	`<div class="col-8">`	• Creates a column spanning specified number of grid units (1–12) • `col-6` occupies half the row.
col-{breakpoint}-{number}	`<div class="col-md-6">`	• Column width applies only at specified breakpoint and above • stacks full-width below for mobile-first design.