Bootstrap 5 Core Cheatsheet

Jun 13, 2026Ajay Dhangar

This guide acts as a rapid production reference for Bootstrap 5 syntax structures. Whether you are scaffolding a layout or overriding a component pattern, look up structural boilerplate samples below.

1. Quick Start Boilerplate

To use Bootstrap 5 without local packaging configurations, include the compiled minified CSS and responsive JavaScript Bundle via the official jsDelivr CDN.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap App</title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <main class="container py-5">
    <h1>Hello, World!</h1>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Layout & Grid Architecture

Containers & Structure

Containers encapsulate and align page content. Do not nest a .container directly inside another .container.

Layout Wrappers
<div class="container">
  <div class="row">
    <div class="col">Auto-matching column width</div>
  </div>
</div>

<div class="container-fluid">
  ...
</div>

Breakpoint Targets & Columns

The Bootstrap layout engine scales across a 12-column grid architecture.

Suffix	Viewport Boundary	Target Device Profile
`col-*`	Default	Extra Small (Phones)
`col-sm-*`	$\ge$ 576px	Small (Tablets in portrait)
`col-md-*`	$\ge$ 768px	Medium (Tablets in landscape)
`col-lg-*`	$\ge$ 992px	Large (Standard Laptops)
`col-xl-*`	$\ge$ 1200px	Extra Large (Desktop Displays)
`col-xxl-*`	$\ge$ 1400px	Ultra-Wide Displays

Responsive Column Allocation Pattern
<div class="row">
  <div class="col-12 col-md-8">Takes 12 columns on Mobile, drops to 8 columns on Mid-screens+</div>
  <div class="col-12 col-md-4">Takes 12 columns on Mobile, drops to 4 columns on Mid-screens+</div>
</div>

3. Atomic System Utilities

Instead of spinning up custom micro-classes, use structural inline utility primitives.

Spacing Engine (`m-` and `p-`)

Syntax configuration formula: [property][side]-[size]

Properties: m (margin) | p (padding)
Sides: t (top) | b (bottom) | s (start/left) | e (end/right) | x (horizontal) | y (vertical)
Sizing Scales: 0 (0px) | 1 (0.25rem) | 2 (0.5rem) | 3 (1rem) | 4 (1.5rem) | 5 (3rem) | auto (auto centering)

Spacing Utility Configurations
<div class="mt-4 mb-2 px-3">Margin-top: 1.5rem, Margin-bottom: 0.5rem, Padding-left/right: 1rem</div>
<div class="mx-auto w-50">Horizontally blocks center target at 50% width scale allocation</div>

Flexbox Controls

Flexbox Layouts
<div class="d-flex">...</div>

<div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-center">...</div>    <div class="d-flex align-items-center">...</div>       ```

### Typography, Color & Sizing Matrix
Use these classes interchangeably to apply systemic global stylings across elements.

```html title="Text & Color Primaries"
<p class="h1">Semantic paragraph elements display styled as a level 1 heading</p>
<h1 class="display-1 fw-bold">Massive, stylized high-impact title display text</h1>

<div class="bg-primary text-white p-3">Theme primary background token</div>
<div class="bg-danger-subtle text-danger p-3">Accessible contextual state layout alert box</div>

4. Key Components Blueprint

Cards

Content Card Component
<div class="card" style="width: 18rem;">
  <img src="https://placehold.co/600x400" class="card-img-top" alt="Card Header Graphic">
  <div class="card-body">
    <h5 class="card-title">Development Feature</h5>
    <p class="card-text">Modular interface block abstraction component framework patterns.</p>
    <a href="#" class="btn btn-primary">Execute Action</a>
  </div>
</div>

Interactive Modals & Collapsibles

Components utilize data-bs-* attributes to orchestrate actions without writing raw event handlers.

Modals and Structural Accordion Elements
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#actionModal">
  Launch Modal Overlay
</button>

<div class="modal fade" id="actionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">System Execution Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to apply these system properties?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Confirm Override</button>
      </div>
    </div>
  </div>
</div>

5. Layout Recipes

Exact Dead-Center Window Wrapper

Perfect for user auth gateways and error pages.

Centered Gateway Template
<div class="d-flex justify-content-center align-items-center vh-100 bg-light">
  <div class="p-5 shadow-lg bg-white rounded-3">
    <h4>Centered Authentication Frame</h4>
  </div>
</div>

Multi-Column Uniform Card Grid

Grid Layout Pattern
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
</div>

Maintainer Best Practices

Always Build Mobile-First: Use base utility overrides for mobile targets, then extend layout complexities upstream using the responsive breakpoint modifiers (e.g., use d-none d-md-block instead of complicated custom target queries).
Never Nest .rows without Parent Columns: A .row applies negative margins to balance column gutters. Placing a inner .row directly into another .row will cause horizontal scroll bugs on mobile devices. Always wrap it cleanly like so: .row $\rightarrow$ .col-* $\rightarrow$ .row.
Do Not Mix Layout Concepts: Avoid forcing utility overrides like .w-100 onto items directly managed by columns inside a structural grid row engine. Let the grid container determine width layouts naturally.

Technical Documentation API References

Telemetry Integration

Completed working through this block? Sync progress to workspace.

1. Quick Start Boilerplate​

2. Layout & Grid Architecture​

Containers & Structure​

Breakpoint Targets & Columns​

3. Atomic System Utilities​

Spacing Engine (m-* and p-*)​

Flexbox Controls​

4. Key Components Blueprint​

Cards​

Interactive Modals & Collapsibles​

5. Layout Recipes​

Exact Dead-Center Window Wrapper​

Multi-Column Uniform Card Grid​

Technical Documentation API References​