Bootstrap Reference

Bootstrap 5

Grid system, utilities, and component classes.

All Topics

Grid System

.container / .container-fluid

Fixed max-width breakpoint containers / full-width container. container-{sm|md|lg|xl|xxl} for responsive.

Example: <div class="container-xl px-4">

.row / .col-*

12-column grid system. col (auto), col-6 (half), col-md-4 (responsive). Gutter control with g-*.

Example: <div class="row g-3"><div class="col-12 col-md-6 col-xl-4">

.offset-md-3

Push a column right by N columns using left margin offset.

Example: <div class="col-md-6 offset-md-3"> 

.order-* / .order-md-*

Reorder columns visually without changing DOM. Responsive variants for different breakpoints.

Example: <div class="col order-last order-md-first">

Breakpoints: sm md lg xl xxl

576px / 768px / 992px / 1200px / 1400px. All utilities support these responsive prefixes.

Example: d-none d-md-block // hidden on mobile, visible on desktop

.row-cols-* / .row-cols-md-*

Set number of equal-width columns per row — easier than individual col classes for card grids.

Example: <div class="row row-cols-1 row-cols-md-3 g-4">

Utilities

d-{value} / d-{bp}-{value}

Display utility. none, block, inline, flex, grid, inline-flex, table. Responsive with breakpoint prefix.

Example: <span class="d-block d-lg-inline">

p-* / m-* / px-* / py-*

Spacing scale 0-5 (0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem). auto for margins.

Example: <div class="p-3 px-lg-5 mt-auto mb-2">

gap-* / row-gap-* / column-gap-*

Bootstrap 5.3+ grid/flex gap utilities. Replaces manual margin/padding tricks.

Example: <div class="d-flex gap-2 flex-wrap">

text-{color} / bg-{color}

Theme colors: primary, secondary, success, danger, warning, info, light, dark. Also bg-opacity-*.

Example: <div class="bg-primary bg-opacity-10 text-primary">

fw-bold / fst-italic / text-*

Font weight, style, alignment, transform, decoration, size (fs-1 to fs-6). text-truncate for ellipsis.

Example: <p class="fw-semibold fs-5 text-end text-truncate">

border / border-{color} / rounded-*

Border utilities with color, size (border-1 to border-5), and radius (rounded, rounded-circle, rounded-pill).

Example: <div class="border border-2 border-primary rounded-3">

shadow / shadow-sm / shadow-lg

Box shadow utilities for depth effect. shadow-none removes shadow from components.

Example: <div class="card shadow-lg">

position-{relative|absolute|fixed|sticky}

Position utilities with top/bottom/start/end/translate-middle for precise placement.

Example: <span class="position-absolute top-0 start-100 translate-middle badge">

Components

.btn / .btn-{variant}

Button variants: primary, secondary, success, danger, outline-*, link. Sizes: btn-sm, btn-lg.

Example: <button class="btn btn-outline-primary btn-lg d-grid">Full width</button>

.card / .card-body

Flexible content container with header, footer, images, list-groups.

Example: <div class="card h-100"><img class="card-img-top"><div class="card-body"><h5 class="card-title">

.navbar / data-bs-toggle

Responsive navbar. Collapses on small screens with hamburger toggler.

Example: <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">

.modal / data-bs-target

Dialog overlay with backdrop. Trigger via data attributes or JS. Supports static backdrop.

Example: <button data-bs-toggle="modal" data-bs-target="#myModal">

.accordion / .collapse

Expandable/collapsible content sections. Accordion groups multiple collapses.

Example: <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed">

.toast / .offcanvas

Toast: non-blocking notification. Offcanvas: drawer panel that slides in from side.

Example: <div class="offcanvas offcanvas-start" data-bs-scroll="true">

.badge / .alert / .progress

Badge for counts, alert for dismissable messages, progress bar with aria-valuenow.

Example: <div class="progress"><div class="progress-bar bg-success" style="width:75%" role="progressbar">

.spinner-border / .spinner-grow

CSS loading spinners. Add size utilities and visually-hidden sr-only text for accessibility.

Example: <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>

Forms

.form-control / .form-select

Styled text inputs / dropdowns. Add .form-control-sm|lg for sizes.

Example: <input class="form-control form-control-lg" type="email" placeholder="Email">

.form-check / .form-switch

Styled checkbox/radio. form-switch for toggle switch style.

Example: <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch">

.input-group

Combine inputs with add-ons (icons, buttons, text) on left/right sides.

Example:

<div class="input-group"><span class="input-group-text">@</span><input class="form-control"><button class="btn btn-primary">

.was-validated / .is-invalid

Bootstrap validation states — show green/red indicators and feedback messages.

Example: <input class="form-control is-invalid"><div class="invalid-feedback">Required.</div>

.floating-label

Material Design-style floating label that moves above input when focused.

Example: <div class="form-floating"><input class="form-control" id="e" placeholder=" "><label for="e">Email</label></div>

Flexbox & Helpers

d-flex / flex-{direction}

Flexbox container. flex-row, flex-column, flex-row-reverse. Add -reverse for RTL.

Example: <div class="d-flex flex-column flex-md-row align-items-center">

justify-content-* / align-items-*

Main axis / cross axis alignment. start, end, center, between, around, evenly, stretch, baseline.

Example: <div class="d-flex justify-content-between align-items-center">

flex-fill / flex-grow-1

flex-fill makes item grow to fill remaining space (flex: 1 1 auto). flex-grow-1 is flex-grow: 1.

Example: <div class="d-flex"><div class="flex-grow-1">Main content</div><div>Sidebar</div></div>

.visually-hidden / .sr-only

Visually hide but keep accessible to screen readers — skip links, icon button labels.

Example: <button><i class="fas fa-close"></i><span class="visually-hidden">Close modal</span></button>

.ratio / .img-fluid

.ratio-16x9 for responsive embed containers. img-fluid for max-width:100% responsive images.

Example: <div class="ratio ratio-16x9"><iframe src="youtube..."></iframe></div>

Bootstrap JS: bootstrap.Modal

Control components programmatically via JS API — show, hide, toggle, dispose.

Example: const modal = new bootstrap.Modal('#myModal'); modal.show(); modal.hide();

CSS Variables override

Bootstrap 5.2+ exposes --bs-* CSS vars — override per-component without recompiling Sass.

Example: .btn-primary { --bs-btn-padding-x: 2rem; --bs-btn-border-radius: 50px; }