Bootstrap 5 Complete Cheat Sheet with Examples

Bootstrap 5 is a free, open-source CSS framework that helps you build responsive websites faster. Think of it as a toolkit filled with pre-built components—buttons, navigation bars, forms, modals—that already work across all screen sizes. Instead of writing hundreds of lines of CSS to make a navbar collapse on mobile, you add a few Bootstrap classes and you're done. Version 5 dropped jQuery dependency, embraced vanilla JavaScript, and introduced a new utility API that gives you superpowers for spacing, colors, and layout.

If you've ever stared at a blank HTML file wondering how to make a professional-looking site without reinventing the wheel, Bootstrap is your answer. It's the most popular CSS framework on GitHub for good reason: it's battle-tested, well-documented, and gets you from idea to working prototype in minutes instead of hours.

• Speed: Build production-ready layouts in a fraction of the time compared to writing custom CSS from scratch
• Consistency: Your buttons, forms, and spacing look uniform across every page—no more "why is this button 2px taller?"
• Mobile-first: Every component is responsive by default, so your site works beautifully on phones, tablets, and desktops
• Community: Massive ecosystem of themes, plugins, and Stack Overflow answers when you get stuck
• Customization: Use Sass variables to rebrand the entire framework to match your design system in one configuration file

Bootstrap's 12-column grid is your bread and butter for layouts. You define rows with .row and columns with .col-* classes. The grid is mobile-first, meaning .col-md-6 applies from medium screens upward, but collapses to full-width on phones.

Breakpoints comparison:

html
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h2>Main Content</h2>
      <p>This takes 8 columns on tablets and up, full-width on mobile.</p>
    </div>
    <div class="col-md-4">
      <h3>Sidebar</h3>
      <p>This takes 4 columns, stacks below on phones.</p>
    </div>
  </div>
</div>

Bootstrap resets browser defaults and gives you utility classes for font sizes, weights, alignment, and colors. Use .display-1 through .display-6 for big hero text, .lead for introductory paragraphs, and .text-* for alignment.

html
<h1 class="display-4 fw-bold text-primary">Welcome to My Site</h1>
<p class="lead text-muted text-center">Building faster with Bootstrap 5</p>
<p class="text-end fst-italic">Aligned right and italicized</p>
<p class="text-truncate" style="max-width: 200px;">
  This very long text will be truncated with an ellipsis
</p>

Text utility patterns:

Bootstrap components are where the magic happens. Buttons get hover states, focus rings, and size variants out of the box. Cards are flexible containers for images, text, and actions. Navbars handle responsive navigation with built-in hamburger menus.

html
<!-- Buttons with variants -->
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-outline-success">Outlined Success</button>
<button class="btn btn-lg btn-danger">Large Delete Button</button>

<!-- Card component -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Product">
  <div class="card-body">
    <h5 class="card-title">Product Name</h5>
    <p class="card-text">Short description of the product goes here.</p>
    <a href="#" class="btn btn-primary">Buy Now</a>
  </div>
</div>

<!-- Responsive navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyBrand</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">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap's form classes make inputs, labels, and validation states consistent. Wrap inputs in .form-control, use .form-label for accessibility, and add .is-valid or .is-invalid for feedback.

html
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="firstName" class="form-label">First Name</label>
    <input type="text" class="form-control" id="firstName" required>
    <div class="invalid-feedback">Please provide your first name.</div>
  </div>
  
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="terms" required>
      <label class="form-check-label" for="terms">Agree to terms</label>
    </div>
  </div>

  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit Form</button>
  </div>
</form>

The spacing system uses a shorthand: {property}{sides}-{size}. Property is m (margin) or p (padding). Sides are t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), or blank for all sides. Sizes range from 0 to 5, plus auto for margins.

Spacing scale:

html
<!-- Margin examples -->
<div class="mt-3">Margin-top 16px</div>
<div class="mx-auto" style="width: 200px;">Centered with auto margins</div>
<div class="mb-5 p-4 bg-light">48px margin-bottom, 24px padding all sides</div>

<!-- Responsive spacing -->
<div class="p-2 p-md-4">8px padding on mobile, 24px on tablets+</div>

Bootstrap 5 heavily leans on flexbox utilities. Use .d-flex to turn any element into a flex container, then control direction, justification, and alignment with utility classes.

html
<!-- Centered content with flexbox -->
<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <div class="text-center">
    <h2>Perfectly Centered</h2>
    <p>Both horizontally and vertically</p>
  </div>
</div>

<!-- Flex direction and wrapping -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-3 bg-primary text-white">Item 1</div>
  <div class="p-3 bg-secondary text-white">Item 2</div>
  <div class="p-3 bg-success text-white">Item 3</div>
</div>

<!-- Space between items -->
<div class="d-flex justify-content-between">
  <span>Left</span>
  <span>Right</span>
</div>

• Nesting containers: You should never put a .container inside another .container. Use .row to subdivide columns instead, or you'll get weird horizontal spacing issues.

• Forgetting the row wrapper: Columns (.col-*) must be direct children of .row. If you skip the row, the grid system breaks and columns don't align properly.

• Overriding with !important: Bootstrap's specificity is well-designed. If your custom CSS isn't applying, check class order in HTML or adjust your selector specificity—don't spam !important everywhere.

• Mixing grid and flexbox incorrectly: .row already uses flexbox under the hood. Adding .d-flex to a row is redundant and can cause conflicts with gutter spacing.

• Ignoring responsive breakpoints: Adding .col-6 makes the column half-width on all screen sizes, even phones. Use .col-12 .col-md-6 to stack on mobile, split on tablets+.

• Not including Bootstrap's JavaScript: Components like modals, dropdowns, and the navbar toggler require Bootstrap's JS bundle. If the hamburger menu doesn't work, check that you loaded bootstrap.bundle.min.js before the closing </body> tag.

💡 Think Like a Programmer: Bootstrap is a design system in code form—you're composing pre-tested patterns instead of writing CSS from scratch. Master the utility classes and component API, and you'll prototype ideas faster than designers can open Figma.