Skip to main content

Bootstrap 5 Core Cheatsheet

Ayesha
EditReport

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.

Video Explanation​

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.

SuffixViewport BoundaryTarget Device Profile
col-*DefaultExtra Small (Phones)
col-sm-*â‰Ĩ\ge 576pxSmall (Tablets in portrait)
col-md-*â‰Ĩ\ge 768pxMedium (Tablets in landscape)
col-lg-*â‰Ĩ\ge 992pxLarge (Standard Laptops)
col-xl-*â‰Ĩ\ge 1200pxExtra Large (Desktop Displays)
col-xxl-*â‰Ĩ\ge 1400pxUltra-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​

Track Your Progress

Done with this topic? Mark it as complete to track your progress.

đŸ’Ŧ Discuss this page

Have a question or spot something confusing in "Bootstrap 5 Core Cheatsheet"? Ask below — it's backed by GitHub Discussions, so maintainers get notified like any other GitHub activity.