Skip to content

Bootstrap 5 Cheatsheet

Getting Started

<!-- CSS (CDN) -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet">

<!-- JS (Popper + Bootstrap JS, needed for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Basic page scaffold

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 App</title>
    <link href=".../bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container py-4">Hello, Bootstrap!</div>
    <script src=".../bootstrap.bundle.min.js"></script>
  </body>
</html>

Breakpoints & Containers

Breakpoints

Infix ≥ px Example usage
(none) 0 .col-6, .d-block
sm 576 .col-sm-6, .d-sm-flex
md 768 .col-md-4, .text-md-start
lg 992 .col-lg-3, .d-lg-none
xl 1200 .col-xl-2, .p-xl-5
xxl 1400 .col-xxl-1, .container-xxl

Containers

<div class="container">...</div>        <!-- responsive fixed widths -->
<div class="container-sm">...</div>     <!-- min-width: 576px -->
<div class="container-md">...</div>
<div class="container-lg">...</div>
<div class="container-xl">...</div>
<div class="container-xxl">...</div>
<div class="container-fluid">...</div>  <!-- always 100% width -->

Grid System (12-column)

Basic

<div class="container">
  <div class="row">
    <div class="col">1/3</div>
    <div class="col">1/3</div>
    <div class="col">1/3</div>
  </div>
  <div class="row">
    <div class="col-4 col-md-3">Fixed cols</div>
    <div class="col-8 col-md-9">Fixed cols</div>
  </div>
</div>

Auto & Equal widths

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Gutters & No-gutter

<div class="row g-0">...</div>        <!-- no gutters -->
<div class="row g-1">...</div>        <!-- 0.25rem -->
<div class="row gx-4 gy-2">...</div>  <!-- x/y gutters -->

Ordering & Offsetting

<div class="row">
  <div class="col order-2 order-md-1">First visually (md+)</div>
  <div class="col order-1 order-md-2">Second (md+)</div>
</div>

<div class="row">
  <div class="col-4 offset-2">offset-2</div>
</div>

Alignment

<div class="row align-items-center justify-content-between">
  <div class="col-4">A</div>
  <div class="col-4">B</div>
</div>

Spacing Utilities

m|p{t|b|s|e|x|y}-{0..5} (margin/padding; s=start, e=end; x=left+right, y=top+bottom)

<div class="mt-3 mb-4 px-2">...</div>
<div class="mx-auto">center block with auto margins</div>

Display, Flex, Grid, Order

Display

<div class="d-none d-sm-block">hidden < sm</div>
<div class="d-flex d-md-inline-flex">...</div>

Flexbox

<div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
  <div class="order-2 order-md-1">One</div>
  <div class="order-1 order-md-2">Two</div>
</div>

Stacks

<div class="vstack gap-2">
  <div>Item</div>
  <div>Item</div>
</div>
<div class="hstack gap-2">
  <button class="btn btn-primary">Save</button>
  <div class="vr"></div>
  <a class="btn btn-link">Cancel</a>
</div>

CSS Grid helpers

<div class="d-grid gap-3">
  <button class="btn btn-primary">Full width</button>
  <button class="btn btn-outline-secondary">Full width</button>
</div>
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary">Auto width (md+)</button>
</div>

Typography

<p class="h1">Heading style h1</p>
<h1 class="display-1">Display 1</h1>
<p class="lead">Lead paragraph</p>
<p class="fs-6 fw-bold fst-italic lh-lg text-muted">font-size/weight/style/line-height</p>
<p class="text-start text-md-center text-uppercase">responsive align & transform</p>
<p class="text-truncate" style="max-width: 240px;">Long text will truncate…</p>

Colors & Backgrounds

Text: text-{primary|secondary|success|danger|warning|info|light|dark|body|muted|white|black-50|white-50} Background: bg-{primary|...}, bg-gradient Borders: border, border-top, border-{0|1|2|3|4|5}, border-{primary|...}

<div class="p-3 text-bg-primary rounded">text-bg-primary</div>
<div class="p-3 bg-warning text-dark">Warning</div>

Sizing & Position

<img class="w-25 h-100" alt="">
<div class="min-vh-100">full viewport height</div>
<div class="position-relative">
  <div class="position-absolute top-0 end-0 translate-middle">Badge</div>
</div>
<div class="fixed-top">...</div>
<div class="sticky-top">...</div>

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-success btn-lg">Large</button>
<button class="btn btn-danger btn-sm" disabled>Disabled</button>
<div class="d-grid gap-2">
  <button class="btn btn-primary">Block (grid)</button>
</div>

Button groups

<div class="btn-group" role="group" aria-label="Basic">
  <button class="btn btn-outline-primary">Left</button>
  <button class="btn btn-outline-primary">Middle</button>
  <button class="btn btn-outline-primary">Right</button>
</div>

Images & Figures

<img src="..." class="img-fluid rounded" alt="">
<img src="..." class="img-thumbnail" alt="">
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="">
  <figcaption class="figure-caption text-end">Caption</figcaption>
</figure>

Tables

<table class="table table-striped table-hover align-middle">
  <thead class="table-dark">
    <tr><th>#</th><th>First</th><th>Last</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Mark</td><td>Otto</td></tr>
  </tbody>
</table>
<!-- Variants: .table-{primary|secondary|success|danger|warning|info|light|dark} -->
<!-- .table-sm, .table-bordered, .table-borderless, .table-striped-columns -->

Forms

<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="name@example.com">
  </div>
  <div class="col-md-6">
    <label class="form-label">Password</label>
    <input type="password" class="form-control">
  </div>
  <div class="col-12">
    <label class="form-label">Select</label>
    <select class="form-select">
      <option>One</option><option>Two</option>
    </select>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="chk">
      <label class="form-check-label" for="chk">Remember me</label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary">Submit</button>
  </div>
</form>

Form text / validation

<input class="form-control is-valid">
<div class="valid-feedback">Looks good!</div>

<input class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid value.</div>

<div class="form-text">We'll never share your email.</div>

Input groups

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="username">
  <button class="btn btn-outline-secondary" type="button">Go</button>
</div>

Floating labels

<div class="form-floating">
  <input type="email" class="form-control" id="fEmail" placeholder="name@example.com">
  <label for="fEmail">Email address</label>
</div>

Switches & ranges

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="sw">
  <label class="form-check-label" for="sw">Enable</label>
</div>

<input type="range" class="form-range" min="0" max="5" step="1">

Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="nav" class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active">Home</a></li>
        <li class="nav-item"><a class="nav-link">Link</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Menu</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item">Action</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success">Search</button>
      </form>
    </div>
  </div>
</nav>

Tabs & Pills

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active p-3" id="home">...</div>
  <div class="tab-pane fade p-3" id="profile">...</div>
</div>
<!-- Pills: .nav-pills -->

Cards

<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">Quick example text.</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
  </ul>
  <div class="card-footer text-body-secondary">Footer</div>
</div>

List Group

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Active</li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ul>

<div class="list-group">
  <a class="list-group-item list-group-item-action" aria-current="true">Link item</a>
</div>

Badges

<h1>Example <span class="badge text-bg-secondary">New</span></h1>
<button class="btn btn-primary">
  Inbox <span class="badge text-bg-light text-dark">4</span>
</button>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><span class="page-link">Prev</span></li>
    <li class="page-item active"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item active">Action</a></li>
    <li><a class="dropdown-item">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item disabled">Disabled</a></li>
  </ul>
</div>

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#m1">Launch</button>

<div class="modal fade" id="m1" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Hello modal!</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Offcanvas

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#side">
  Open sidebar
</button>

<div class="offcanvas offcanvas-start" id="side" tabindex="-1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Sidebar</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">Content…</div>
</div>

Toasts

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast show" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>just now</small>
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Hello, world!</div>
  </div>
</div>

Tooltips & Popovers

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip text">Hover me</button>

<button class="btn btn-info" data-bs-toggle="popover" data-bs-title="Title" data-bs-content="Popover content">
  Click me
</button>

<script>
  // Enable tooltips & popovers (once)
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
</script>

Collapse & Accordion

<p>
  <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#c1">Toggle</a>
</p>
<div class="collapse" id="c1"><div class="card card-body">Collapsed content</div></div>

<div class="accordion" id="acc">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#p1">Panel 1</button>
    </h2>
    <div id="p1" class="accordion-collapse collapse show" data-bs-parent="#acc">
      <div class="accordion-body">Body</div>
    </div>
  </div>
</div>

<div id="carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#carousel" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="">
      <div class="carousel-caption d-none d-md-block"><h5>First</h5></div>
    </div>
    <div class="carousel-item"><img src="..." class="d-block w-100" alt=""></div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Progress, Spinners, Placeholders

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-50">50%</div>
</div>

<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow" role="status"></div>

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
  <span class="placeholder col-4 bg-primary"></span>
</p>

Ratios (Responsive Embeds)

<div class="ratio ratio-16x9">
  <iframe src="..." allowfullscreen></iframe>
</div>
<!-- Also: ratio-1x1, ratio-4x3, ratio-21x9, or custom with CSS variable -->

Helpers & Accessibility

<span class="visually-hidden">Screenreader-only text</span>
<div class="clearfix"></div>          <!-- clear floats -->
<div class="link-primary">Link style</div>
<img src="..." class="img-fluid" alt="Descriptive alt text">

Borders, Radius, Shadows

<div class="border border-2 border-info p-3 rounded-3 shadow-sm">Box</div>
<!-- Radius: .rounded, .rounded-0, .rounded-1..5, .rounded-circle, .rounded-pill -->
<!-- Shadows: .shadow-none, .shadow-sm, .shadow, .shadow-lg -->

Utilities (Patterns)

Most utilities follow:

  • Responsive: append -{breakpoint} → .d-md-flex
  • Stateful (hover/focus) on some utilities: .link-primary:hover (via custom CSS as needed)
  • Values: numeric scale 0–5 (or named like auto, start, end)

Common ones

<!-- Text -->
<p class="text-start text-md-center text-nowrap text-break">...</p>

<!-- Overflow -->
<div class="overflow-auto">...</div>

<!-- Opacity -->
<div class="opacity-50">Faded</div>

<!-- Z-index helpers (via position + utility classes) -->
<div class="position-relative z-3">On top</div>

<!-- Object fit -->
<img class="w-100" style="object-fit: cover; height: 200px;" alt="">

Icons (not included)

Use a separate icon set, e.g. Bootstrap Icons:

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<i class="bi bi-alarm"></i>

JavaScript APIs (Programmatic Control)

// Collapse
const myCollapse = new bootstrap.Collapse('#c1');

// Modal events
const modalEl = document.getElementById('m1');
modalEl.addEventListener('shown.bs.modal', () => console.log('shown'));

// Carousel
const car = new bootstrap.Carousel('#carousel', { interval: 4000, pause: 'hover' });

Theming Tips

  • Override CSS variables in a wrapper or :root:
:root {
  --bs-primary: #6f42c1;
  --bs-border-radius: 0.5rem;
}
  • Add .bg-body-tertiary for subtle surfaces.
  • Use .text-bg-* helpers for readable colored chips.

Quick Layout Recipes

Centered, constrained content

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">...</div>
  </div>
</div>

Responsive two-column with sticky sidebar

<div class="container">
  <div class="row">
    <aside class="col-md-4 d-none d-md-block">
      <div class="sticky-top" style="top: 1rem;">Sidebar</div>
    </aside>
    <main class="col-12 col-md-8">Content</main>
  </div>
</div>

Card deck with equal heights

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
</div>

Debug Helpers

<div class="container">
  <div class="row">
    <div class="col-4"><div class="p-3 bg-light border">.col-4</div></div>
    <div class="col-4"><div class="p-3 bg-light border">.col-4</div></div>
    <div class="col-4"><div class="p-3 bg-light border">.col-4</div></div>
  </div>
</div>

Accessibility Checklist (quick)

  • Always set lang on <html>.
  • Provide meaningful alt text for images.
  • Use aria-* attributes where provided by components.
  • Keep contrast high, especially on .text-bg-* and custom themes.
  • Leverage .visually-hidden for helper text.