Free Resource

Bootstrap 5 Cheat Sheet

Every Bootstrap 5 class, component, and utility in one searchable reference. 58 entries across 8 categories with copy-paste code snippets.

Search or browse by category

Find the class you need

Copy the code snippet

Container

.container

Fixed-width responsive container with max-width at each breakpoint.

<div class="container">
  <!-- Content here -->
</div>

Container Fluid

.container-fluid

Full-width container spanning the entire viewport.

<div class="container-fluid">
  <!-- Full-width content -->
</div>

Row

.row

Flex container for columns with negative margins for gutters.

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

Column Sizing

.col.col-{n}

Equal-width or specific-width columns spanning 1-12 grid units.

<div class="row">
  <div class="col-8">Main (8/12)</div>
  <div class="col-4">Sidebar (4/12)</div>
</div>

Responsive Columns

.col-{breakpoint}-{n}

Column width that applies at a specific breakpoint (sm, md, lg, xl, xxl) and up.

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    Responsive column
  </div>
</div>

Gutters

.g-{n}.gx-{n}.gy-{n}

Set gap between columns. g for both axes, gx horizontal, gy vertical. Scale: 0-5.

<div class="row g-3">
  <div class="col-6">Gapped col</div>
  <div class="col-6">Gapped col</div>
</div>

Offset

.offset-{n}.offset-{breakpoint}-{n}

Move columns to the right by a specified number of grid columns.

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

Order

.order-{n}.order-first.order-last

Change the visual order of columns. Values: 0-5, first, last.

<div class="row">
  <div class="col order-3">Third</div>
  <div class="col order-1">First</div>
  <div class="col order-2">Second</div>
</div>

Headings

.h1.h2.h3.h4.h5.h6

Apply heading styles to any element without using heading tags.

<p class="h1">Heading 1 style</p>
<p class="h3">Heading 3 style</p>

Display Headings

.display-1.display-2.display-3.display-4.display-5.display-6

Larger, more opinionated heading styles for hero sections and landing pages.

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

Lead Paragraph

.lead

Make a paragraph stand out with larger, lighter text.

<p class="lead">
  This is a lead paragraph for introductions.
</p>

Font Weight

.fw-bold.fw-semibold.fw-normal.fw-light

Set the font weight of text from bold to light.

<p class="fw-bold">Bold text</p>
<p class="fw-light">Light text</p>

Italic

.fst-italic.fst-normal

Set font style to italic or reset to normal.

<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

Text Decoration

.text-decoration-none.text-decoration-underline.text-decoration-line-through

Control text decoration on links and text elements.

<a href="#" class="text-decoration-none">
  Link without underline
</a>
<p class="text-decoration-line-through">Strikethrough</p>

Text Truncate

.text-truncate

Truncate text with an ellipsis. Requires display: inline-block or block.

<div class="text-truncate" style="max-width: 200px;">
  Long text that will be truncated with ellipsis
</div>

Text Colors

.text-primary.text-secondary.text-success.text-danger.text-warning.text-info

Apply theme color variants to text content.

<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>

Background Colors

.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info

Apply theme colors as background. Pair with text-white for contrast.

<div class="bg-primary text-white p-3">Primary</div>
<div class="bg-success text-white p-3">Success</div>

Muted Text

.text-muted

Gray text color for secondary or de-emphasized content.

<p class="text-muted">This is secondary text</p>

Background Gradient

.bg-gradient

Add a subtle gradient overlay to any background color.

<div class="bg-primary bg-gradient text-white p-3">
  Gradient background
</div>

Background Opacity

.bg-opacity-25.bg-opacity-50.bg-opacity-75

Adjust background color opacity without affecting child elements.

<div class="bg-primary bg-opacity-25 p-3">
  25% opacity background
</div>
<div class="bg-primary bg-opacity-50 p-3">
  50% opacity background
</div>

Text Colors (B/W)

.text-white.text-black.text-body

Set text to white, black, or the default body color.

<p class="text-white bg-dark p-2">White on dark</p>
<p class="text-black bg-light p-2">Black on light</p>

Margin

.m-{0-5}.mx-auto

Set margin on all sides. Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem.

<div class="m-3">Margin on all sides</div>
<div class="mx-auto" style="width:200px">Centered</div>

Padding

.p-{0-5}

Set padding on all sides using the spacing scale.

<div class="p-4">Padding all sides</div>
<div class="p-0">No padding</div>

Top & Bottom Margin

.mt-{n}.mb-{n}

Set margin-top or margin-bottom individually.

<h2 class="mt-5 mb-3">Section heading</h2>

Horizontal & Vertical Padding

.px-{n}.py-{n}

Set horizontal (left + right) or vertical (top + bottom) padding.

<button class="px-4 py-2">Padded button</button>

Start & End Margin

.ms-{n}.me-{n}

Set margin-start (left in LTR) or margin-end (right in LTR).

<div class="ms-auto">Pushed to the right</div>
<div class="me-3">Right margin</div>

Gap

.gap-{0-5}

Set gap between flex or grid children. Use with d-flex or d-grid.

<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Container

.d-flex.d-inline-flex

Create a flex or inline-flex container.

<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
</div>

Direction

.flex-row.flex-column.flex-row-reverse.flex-column-reverse

Set the direction of flex items: horizontal or vertical.

<div class="d-flex flex-column">
  <div>Stacked item 1</div>
  <div>Stacked item 2</div>
</div>

Wrap

.flex-wrap.flex-nowrap.flex-wrap-reverse

Allow or prevent flex items from wrapping to new lines.

<div class="d-flex flex-wrap">
  <!-- Items wrap when space runs out -->
</div>

Justify Content

.justify-content-start.justify-content-center.justify-content-end.justify-content-between.justify-content-around

Align flex items along the main axis.

<div class="d-flex justify-content-between">
  <div>Left</div>
  <div>Right</div>
</div>

Align Items

.align-items-start.align-items-center.align-items-end.align-items-baseline.align-items-stretch

Align flex items along the cross axis.

<div class="d-flex align-items-center" style="height:100px">
  <div>Vertically centered</div>
</div>

Flex Grow

.flex-grow-0.flex-grow-1

Control whether a flex item grows to fill available space.

<div class="d-flex">
  <div class="flex-grow-1">Takes remaining space</div>
  <div>Fixed width</div>
</div>

Flex Shrink

.flex-shrink-0.flex-shrink-1

Control whether a flex item shrinks when space is limited.

<div class="d-flex">
  <div class="flex-shrink-0">Will not shrink</div>
  <div class="flex-shrink-1">Can shrink</div>
</div>

Align Self

.align-self-start.align-self-center.align-self-end.align-self-stretch

Override align-items for an individual flex item.

<div class="d-flex" style="height:100px">
  <div class="align-self-start">Top</div>
  <div class="align-self-center">Middle</div>
  <div class="align-self-end">Bottom</div>
</div>

Button

.btn.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info

Styled button with theme color variants. Add btn-lg or btn-sm for sizing.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success btn-lg">Large</button>

Outline Button

.btn-outline-primary.btn-outline-secondary.btn-outline-success.btn-outline-danger

Outlined button with transparent background that fills on hover.

<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-danger">Outline Danger</button>

Card

.card.card-body.card-title.card-text.card-header.card-footer

Flexible content container with optional header, body, and footer.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

Navbar

.navbar.navbar-expand-lg.navbar-dark.nav.nav-link

Responsive navigation header with branding, links, and collapse toggle.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home</a>
      <a class="nav-link" href="#">About</a>
    </div>
  </div>
</nav>

Badge

.badge.rounded-pill

Small label for status indicators, counts, or tags.

<span class="badge bg-primary">New</span>
<span class="badge bg-danger">3</span>
<span class="badge rounded-pill bg-success">Active</span>

Alert

.alert.alert-primary.alert-success.alert-danger.alert-warning.alert-dismissible

Contextual feedback message with optional dismiss button.

<div class="alert alert-success" role="alert">
  Operation completed successfully!
</div>
<div class="alert alert-danger alert-dismissible fade show">
  Error occurred.
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

Table

.table.table-striped.table-hover.table-bordered

Styled HTML table with optional stripes, hover highlight, and borders.

<table class="table table-striped table-hover">
  <thead>
    <tr><th>Name</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>PM</td></tr>
    <tr><td>Bob</td><td>Engineer</td></tr>
  </tbody>
</table>

Form Control

.form-control.form-control-lg.form-control-sm

Styled text input with optional sizing variants.

<input type="text" class="form-control" placeholder="Default input">
<input type="text" class="form-control form-control-lg" placeholder="Large input">

Form Select

.form-select.form-select-lg.form-select-sm

Styled dropdown select element with sizing options.

<select class="form-select">
  <option selected>Choose...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Form Check

.form-check.form-check-input.form-check-label.form-switch

Styled checkboxes, radios, and toggle switches.

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Checkbox</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1">
  <label class="form-check-label" for="switch1">Toggle</label>
</div>

Display None

.d-none

Hide an element completely. Removes it from the document flow.

<div class="d-none">Hidden element</div>

Responsive Display

.d-{breakpoint}-{value}

Show or hide elements at specific breakpoints. Values: none, block, flex, inline, grid, table.

<div class="d-none d-md-block">
  Hidden on mobile, visible on md+
</div>
<div class="d-block d-lg-none">
  Visible below lg only
</div>

Position

.position-relative.position-absolute.position-fixed.position-sticky

Set CSS position property for element placement.

<div class="position-relative">
  <div class="position-absolute top-0 end-0">
    Top-right corner
  </div>
</div>

Sizing

.w-25.w-50.w-75.w-100.h-25.h-50.h-100

Set width or height as a percentage of the parent element.

<div class="w-50">50% width</div>
<div class="w-100">Full width</div>

Overflow

.overflow-hidden.overflow-auto.overflow-visible.overflow-scroll

Control how content that exceeds the element box is handled.

<div class="overflow-auto" style="height: 100px;">
  Scrollable content area...
</div>

Visibility

.visible.invisible

Toggle visibility without changing layout. Unlike d-none, invisible elements still take up space.

<div class="visible">Visible element</div>
<div class="invisible">Hidden but takes space</div>

Border

.border.border-{1-5}.border-top.border-bottom

Add borders on all or specific sides with optional width control.

<div class="border p-3">Default border</div>
<div class="border border-3 p-3">3px border</div>
<div class="border-bottom p-3">Bottom only</div>

Border Color

.border-primary.border-secondary.border-success.border-danger.border-warning

Set border color using theme color variants.

<div class="border border-primary border-2 p-3">
  Primary border
</div>
<div class="border border-danger border-2 p-3">
  Danger border
</div>

Rounded

.rounded.rounded-{0-5}.rounded-circle.rounded-pill

Set border-radius with preset values, circle, or pill shapes.

<img src="avatar.jpg" class="rounded-circle" width="80">
<span class="rounded-pill bg-primary text-white px-3 py-1">
  Pill badge
</span>

Shadow

.shadow.shadow-sm.shadow-lg.shadow-none

Add or remove box-shadow from small to large.

<div class="shadow-sm p-3 mb-3">Small shadow</div>
<div class="shadow p-3 mb-3">Regular shadow</div>
<div class="shadow-lg p-3">Large shadow</div>

Opacity

.opacity-0.opacity-25.opacity-50.opacity-75.opacity-100

Set the opacity of an entire element including its children.

<div class="opacity-100">Full opacity</div>
<div class="opacity-50">Half opacity</div>
<div class="opacity-25">Quarter opacity</div>

Border Remove

.border-0.border-top-0.border-end-0.border-bottom-0.border-start-0

Remove borders from all or specific sides of an element.

<div class="border border-top-0 p-3">
  No top border
</div>

Get More Developer Resources

Join our newsletter for cheat sheets, code snippets, and developer tools delivered weekly.

or use email

Get this + weekly PM tools and templates.