Bootstrap 5 Reference Guide

A complete, searchable Bootstrap 5 reference with live examples and dark-themed interactive demos. 18 sections covering the grid system, layout utilities, every major component, and JavaScript plugins.

Grid & Layout

Bootstrap's 12-column grid system uses containers, rows, and columns. Columns fill a 12-unit row — you control how many units each column takes at each breakpoint.

Containers

.container — responsive max-width at each breakpoint
.container-fluid — full viewport width at all times
.container-{sm|md|lg|xl|xxl} — fluid until the named breakpoint

<div class="container">
  <!-- Constrained to a responsive max-width -->
</div>
<div class="container-fluid">
  <!-- Full-width, spans the entire viewport -->
</div>

Rows & Columns

Use .row as a flex container, then .col-* classes for columns
Columns must total 12 or use .col for equal auto-sizing

<div class="container">
  <div class="row">
    <div class="col-4">Column 1 (4/12)</div>
    <div class="col-4">Column 2 (4/12)</div>
    <div class="col-4">Column 3 (4/12)</div>
  </div>
  <div class="row mt-2">
    <div class="col">Auto-sized</div>
    <div class="col">Auto-sized</div>
    <div class="col">Auto-sized</div>
  </div>
</div>

Responsive Breakpoints

xs <576px · sm ≥576px · md ≥768px · lg ≥992px · xl ≥1200px · xxl ≥1400px

<!-- Stack on mobile, side-by-side on md+ -->
<div class="row">
  <div class="col-12 col-md-6">Left on desktop</div>
  <div class="col-12 col-md-6">Right on desktop</div>
</div>

Offsets & Gutters

<div class="row">
  <div class="col-md-4">No offset</div>
  <div class="col-md-4 offset-md-4">Offset by 4</div>
</div>
<!-- Gutter control -->
<div class="row g-3"><!-- gap-3 on both axes --></div>
<div class="row gx-4 gy-2"><!-- horizontal 4, vertical 2 --></div>

Flexbox Utilities

Bootstrap exposes CSS Flexbox through utility classes, letting you align, distribute, wrap, and order elements without writing custom CSS.

Enable Flex

<div class="d-flex">...</div>
<div class="d-inline-flex">...</div>

Direction

<div class="d-flex flex-row">        <!-- default: left to right -->
<div class="d-flex flex-row-reverse"> <!-- right to left -->
<div class="d-flex flex-column">      <!-- top to bottom -->
<div class="d-flex flex-column-reverse">

Justify Content (main axis)

<div class="d-flex justify-content-start">Start (default)</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-between">Space Between</div>
<div class="d-flex justify-content-around">Space Around</div>
<div class="d-flex justify-content-evenly">Space Evenly</div>

Align Items (cross axis)

<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-center">Middle</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-stretch">Stretch (default)</div>
<!-- Per-item override -->
<div class="align-self-center">This item centered</div>

Grow, Shrink & Gap

<div class="flex-grow-1">Takes remaining space</div>
<div class="flex-shrink-0">Never shrinks</div>
<div class="d-flex gap-3">3-unit gap between items</div>
<div class="d-flex flex-wrap">Items wrap to next line</div>

Order

<div class="order-3">Displayed third (1–5 + first/last)</div>
<div class="order-first">Always first</div>
<div class="order-last">Always last</div>

Spacing & Color Utilities

Bootstrap's utility classes cover margin, padding, colors, borders, shadows, and sizing — no custom CSS required for most layout adjustments.

Spacing (margin & padding)

Pattern: {m|p}{t|b|s|e|x|y|blank}-{0|1|2|3|4|5|auto}
Sizes: 0=0 · 1=0.25rem · 2=0.5rem · 3=1rem · 4=1.5rem · 5=3rem

<div class="mt-3">margin-top: 1rem</div>
<div class="mb-4 px-3">margin-bottom 1.5rem, padding-x 1rem</div>
<div class="mx-auto" style="width:200px">Horizontally centered</div>
<div class="p-0 m-0">No padding or margin</div>

Text & Background Colors

<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-danger">text-danger</p>
<p class="text-warning">text-warning</p>
<p class="text-muted">text-muted</p>
<div class="bg-primary text-white p-2">bg-primary</div>
<div class="bg-body-secondary p-2">bg-body-secondary</div>

Borders

<div class="border">All borders</div>
<div class="border-top border-bottom">Top and bottom only</div>
<div class="border border-primary border-2">Primary, 2px</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-pill">Pill / fully-rounded</div>
<div class="rounded-circle">Circle</div>

Shadows & Sizing

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="w-50 h-100">50% width, 100% height</div>
<div class="d-none d-md-block">Hidden below md breakpoint</div>

Typography

Bootstrap sets sensible defaults for headings, paragraphs, lists, and inline elements. Utility classes adjust weight, alignment, and style without custom CSS.

Headings & Display

<h1>Heading 1</h1> through <h6>Heading 6</h6>
<!-- Display headings: larger, thinner font weight -->
<h1 class="display-1">Display 1</h1>
<h2 class="display-4">Display 4</h2>
<!-- Heading class on non-heading element -->
<p class="h3">Styled as h3, not h3</p>

Text Utilities

<p class="lead">Lead paragraph — larger and lighter.</p>
<p class="text-muted">Muted / reduced-contrast text.</p>
<p class="text-center">Center-aligned</p>
<p class="text-end">Right-aligned</p>
<p class="text-uppercase fw-bold">Uppercase, bold</p>
<p class="text-truncate" style="max-width:200px">Truncate with ellipsis</p>
<mark>Highlighted text</mark>
<del>Deleted text</del>
<code>Inline code</code>
<kbd>Ctrl+C</kbd>

Lists

<ul class="list-unstyled">
  <li>No bullet points</li>
</ul>
<ul class="list-inline">
  <li class="list-inline-item">Inline item A</li>
  <li class="list-inline-item">Inline item B</li>
</ul>

Cards

Cards are flexible, extensible content containers with optional header, footer, image, and body sections. They support grid layouts and group patterns.

Basic Card

<div class="card" style="width: 18rem">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card description text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card with Header & Footer

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card text here.</p>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

Card Variants & Utilities

<div class="card text-bg-primary">...</div>  <!-- colored card -->
<div class="card border-success">...</div>   <!-- colored border -->
<div class="card h-100">...</div>            <!-- equal-height in grid -->
<ul class="list-group list-group-flush">       <!-- list inside card -->
  <li class="list-group-item">Cras justo</li>
  <li class="list-group-item">Dapibus</li>
</ul>

Forms

Bootstrap styles form controls with .form-control, .form-select, and .form-check. Validation states, input groups, and floating labels are built in.

Basic Inputs

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <div class="form-text">We'll never share your email.</div>
</div>
<div class="mb-3">
  <label for="textarea" class="form-label">Comments</label>
  <textarea class="form-control" id="textarea" rows="3"></textarea>
</div>

Select, Checkboxes & Switches

<select class="form-select mb-3">
  <option selected>Choose an option</option>
  <option value="1">Option 1</option>
</select>
<div class="form-check mb-2">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Default checkbox</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="toggle" checked>
  <label class="form-check-label" for="toggle">Enable notifications</label>
</div>

Validation

<div class="mb-3">
  <input class="form-control is-valid" type="text" value="correct">
  <div class="valid-feedback">Looks good!</div>
</div>
<div class="mb-3">
  <input class="form-control is-invalid" type="text" value="wrong">
  <div class="invalid-feedback">Please provide a valid value.</div>
</div>

Input Groups & Floating Labels

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email address</label>
</div>

Navbar

The Bootstrap navbar is responsive by design. It includes a brand, collapsible navigation, dropdowns, and a hamburger toggler for mobile.

Basic Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyApp</a>
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Color Schemes & Variants

data-bs-theme="dark" on <nav> for a dark navbar
.navbar-expand-{sm|md|lg|xl} controls collapse breakpoint
.fixed-top / .sticky-top for fixed positioning

Tabs & Pills

Navigation tabs and pills switch between panes of content. They work with Bootstrap's tab JavaScript plugin for dynamic show/hide behavior.

Nav Tabs

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
  </li>
</ul>
<div class="tab-content mt-3">
  <div class="tab-pane fade show active" id="home">Home content</div>
  <div class="tab-pane fade" id="profile">Profile content</div>
</div>

Nav Pills

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>
<!-- Fill / Justified -->
<ul class="nav nav-pills nav-fill">...</ul>
<ul class="nav nav-pills nav-justified">...</ul>

Scrollspy

Scrollspy automatically updates navigation links based on scroll position, highlighting the active section as the user scrolls through the page.

Setup

<!-- Scrollable container -->
<div data-bs-spy="scroll" data-bs-target="#navbar-spy" data-bs-offset="0" tabindex="0">
  <h4 id="section-1">Section 1</h4>
  <p>Content for section 1...</p>
  <h4 id="section-2">Section 2</h4>
  <p>Content for section 2...</p>
</div>

<!-- Linked nav -->
<nav id="navbar-spy">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item"><a class="nav-link" href="#section-1">Section 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#section-2">Section 2</a></li>
  </ul>
</nav>

Buttons

Buttons come in eight semantic color variants, two styles (solid and outline), three sizes, and can be grouped or disabled. Apply .btn with a variant class to any <button> or <a>.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Outline, Sizes & States

<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
<div class="d-grid"><button class="btn btn-primary">Full-width block</button></div>
<button class="btn btn-primary" disabled>Disabled</button>
<!-- Loading spinner -->
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>Loading...
</button>

Button Groups

<div class="btn-group">
  <button class="btn btn-outline-secondary">Left</button>
  <button class="btn btn-outline-secondary">Middle</button>
  <button class="btn btn-outline-secondary">Right</button>
</div>

Alerts & Badges

Alerts provide contextual feedback messages. Badges display counts or labels as small, inline elements attached to text or buttons.

Alert Colors

<div class="alert alert-primary" role="alert">A primary alert.</div>
<div class="alert alert-success" role="alert">Success message.</div>
<div class="alert alert-danger" role="alert">Danger! Something went wrong.</div>
<div class="alert alert-warning" role="alert">Warning: check your inputs.</div>
<div class="alert alert-info" role="alert">Informational message.</div>

Dismissible Alert

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> This alert can be dismissed.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Badges

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge rounded-pill bg-primary">Pill badge</span>
<!-- Badge on a button -->
<button class="btn btn-primary">
  Messages <span class="badge bg-light text-dark ms-1">4</span>
</button>
<!-- Notification dot -->
<button class="btn btn-secondary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>
</button>

Modal

Modals are dialog overlays powered by Bootstrap's JavaScript plugin. They support any content, multiple sizes, vertical centering, and scrollable bodies.

Basic Modal

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>
<!-- Modal markup -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Modal body content here.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Modal Sizes & Options

<div class="modal-dialog modal-sm">...</div>      <!-- Small -->
<div class="modal-dialog modal-lg">...</div>      <!-- Large -->
<div class="modal-dialog modal-xl">...</div>      <!-- Extra large -->
<div class="modal-dialog modal-fullscreen">...</div>  <!-- Full screen -->
<div class="modal-dialog modal-dialog-centered">...</div>    <!-- Vertically centered -->
<div class="modal-dialog modal-dialog-scrollable">...</div>  <!-- Scrollable body -->

Accordion

Accordions use collapse to show and hide content sections. By default only one item is open at a time, but data-bs-parent controls this behavior.

Basic Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">Content for item one.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">Content for item two.</div>
    </div>
  </div>
</div>

Variants

<div class="accordion accordion-flush">...</div>  <!-- No border / outer corners -->
<!-- Always-open: omit data-bs-parent to allow multiple items open -->

Tooltips & Popovers

Tooltips show brief text on hover. Popovers show richer content with a header and body. Both require JavaScript initialization and are powered by Popper.

Tooltips

<!-- Must initialize: bootstrap.Tooltip.getOrCreateInstance(el) -->
<button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Hover me
</button>
<!-- Placements: top, bottom, left, right -->
<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom">Bottom</button>
<button data-bs-toggle="tooltip" data-bs-placement="left" title="Left">Left</button>

Popovers

<button type="button" class="btn btn-lg btn-danger"
  data-bs-toggle="popover"
  data-bs-title="Popover title"
  data-bs-content="And here's some amazing content.">
  Click to toggle popover
</button>
<!-- Initialize: bootstrap.Popover.getOrCreateInstance(el) -->

Progress & Spinners

Progress bars visualize completion of a task. Spinners indicate loading states in two styles: border (ring) and grow (pulsing dot).

Progress Bars

<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>
<!-- Striped and animated -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%"></div>
</div>
<!-- Multiple stacked bars -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:35%"></div>
  <div class="progress-bar bg-warning" style="width:20%"></div>
  <div class="progress-bar bg-danger" style="width:10%"></div>
</div>

Spinners

<!-- Border spinner (ring) -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border spinner-border-sm"></div>  <!-- Small -->

<!-- Grow spinner (pulsing) -->
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Offcanvas

Offcanvas panels slide in from any edge of the viewport. They are commonly used for sidebars, mobile menus, and shopping carts.

Basic Offcanvas

<!-- Trigger -->
<button class="btn btn-primary" type="button"
  data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Open Offcanvas
</button>
<!-- Panel -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Content inside the offcanvas panel.
  </div>
</div>

Placement & Options

<div class="offcanvas offcanvas-start">...</div>   <!-- Left (default) -->
<div class="offcanvas offcanvas-end">...</div>    <!-- Right -->
<div class="offcanvas offcanvas-top">...</div>    <!-- Top -->
<div class="offcanvas offcanvas-bottom">...</div> <!-- Bottom -->
<!-- No backdrop -->
<div class="offcanvas" data-bs-backdrop="false">...</div>

Toasts

Toasts are lightweight notification pop-ups inspired by mobile push notifications. They auto-hide after a timeout and support stacking.

Basic Toast

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Stacking & Positioning

<!-- Toast container for stacking -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast">...</div>
  <div class="toast">...</div>
</div>
<!-- Positions: top-0/bottom-0 start-0/end-0 / top-50 start-50 translate-middle -->
<!-- Auto-hide delay -->
<div class="toast" data-bs-delay="5000">...</div>
<!-- No auto-hide -->
<div class="toast" data-bs-autohide="false">...</div>

Carousel

The carousel cycles through a series of images, text, or custom markup. It includes previous/next controls, indicators, captions, and touch support.

Basic Carousel

<div id="carouselExample" class="carousel slide">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
  </div>
  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slide 1</h5><p>Caption text.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <!-- Controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Options

<div class="carousel carousel-fade slide">...</div> <!-- Fade transition -->
<div class="carousel" data-bs-interval="3000">...</div> <!-- 3s interval -->
<div class="carousel" data-bs-ride="false">...</div>  <!-- No autoplay -->