Bootstrap Reference

Bootstrap 5.3 Reference

Overview

Bootstrap is a mobile-first CSS + JavaScript framework: a 12-column responsive grid, a large set of utility classes, prebuilt components, and a small set of JavaScript plugins driven by data-bs-* attributes. Current version: v5.3.8 (5.3 line; no jQuery, dark mode built in).

Core principle: Compose UI from utilities and components first; write custom CSS only when Bootstrap can't express it. Everything is mobile-first — unprefixed classes apply to all sizes, and breakpoint-infixed classes (-sm/-md/-lg/-xl/-xxl) apply from that breakpoint up.

This is the condensed-but-accurate reference. When behavior is contested, the official 5.3 docs are the source of truth.

When to Use

• Setting up Bootstrap (CDN vs npm/Sass) and the starter template.
• Building layout with containers, the grid, and flex/spacing utilities.
• Picking the right utility class (spacing, color, display, flex, text, borders, sizing).
• Wiring up components and their required markup + data-bs-* attributes.
• Using the JavaScript API (data attributes vs programmatic, events, tooltips/popovers opt-in).
• Enabling dark mode / color modes and theming via Sass or CSS variables.

Not for: plain HTML semantics (see the html5-reference skill), JavaScript language questions (see javascript-reference), or non-Bootstrap CSS frameworks (Tailwind, Bulma).

Setup

CDN (quickest) — CSS in <head>, JS bundle before </body>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

• bootstrap.bundle.min.js includes Popper (needed by dropdowns, tooltips, popovers). bootstrap.min.js does not — load Popper separately if you use it.
• Integrity hashes are version-specific — if you change the version, copy the matching hash from the docs or drop the integrity/crossorigin attributes.
• npm: npm i bootstrap@5.3.8 @popperjs/core, then import * as bootstrap from 'bootstrap' and either import the CSS or @import "bootstrap/scss/bootstrap" in your Sass (see javascript-theming.md).

Starter template (note data-bs-theme on <html> for dark mode):

<!doctype html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="…/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" …>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="…/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" …></script>
  </body>
</html>

The viewport meta tag is required for responsive behavior.

Breakpoints (mobile-first)

Breakpoints use min-width media queries. "Down" queries subtract .02px (e.g. md down = max-width: 767.98px). A class like d-md-flex means "flex from 768px up"; combine with an unprefixed base (d-none d-md-block = hidden on mobile, shown from md).

Core Concepts Cheat-Sheet

Grid: .container → .row → .col*. 12 columns per row. col = equal width, col-6 = half, col-md-4 = ⅓ from md up, col-auto = content width. Gutters via g-*/gx-*/gy-*. → layout-grid.md

Spacing utilities: {m|p}{t|b|s|e|x|y|<blank>}-{0..5|auto}, responsive …-{bp}-…. 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem. Negative margins m*-n1..n5 are opt-in ($enable-negative-margins, not in the CDN build). e.g. mt-3, px-md-4, mx-auto. → utilities.md

Theme colors (semantic): primary secondary success danger warning info light dark. Used across text-*, bg-*, btn-*, alert-*, border-*, text-bg-*. 5.3 adds subtle/emphasis variants: bg-primary-subtle, text-primary-emphasis, border-primary-subtle.

JS plugins: declarative via data-bs-toggle + data-bs-target, or new bootstrap.Modal(el). Events: shown.bs.modal etc. Tooltips & popovers must be initialized in JS (opt-in). → javascript-theming.md