Guide

The Ultimate Bootstrap 5 Cheatsheet: Developer's Quick Reference Guide

Bootstrap 5 Components Cheatsheet

A comprehensive guide to Bootstrap's most useful components

Table of Contents

Layout Components

Grid System

Bootstrap's grid system uses containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Column 1
Column 2
Column 3
<div class='container'>
  <div class='row'>
    <div class='col-sm-4'>Column 1</div>
    <div class='col-sm-4'>Column 2</div>
    <div class='col-sm-4'>Column 3</div>
  </div>
</div>

Containers

Containers are the most basic layout element in Bootstrap and are required when using the grid system.

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

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

<div class='container-lg'>
  <!-- Responsive container -->
</div>

Breakpoints

Bootstrap includes six default breakpoints for responsive design:

Breakpoint Class Infix Dimensions
Extra small (none) <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

Content Components

Typography

Bootstrap defines basic styling for headings, paragraphs, lists, and more.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

This is a lead paragraph. It stands out from regular paragraphs.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<p class='lead'>This is a lead paragraph.</p>

Cards

Cards provide a flexible container for displaying content.

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
<div class='card' style='width: 18rem;'>
  <div class='card-body'>
    <h5 class='card-title'>Card title</h5>
    <h6 class='card-subtitle mb-2 text-muted'>Card subtitle</h6>
    <p class='card-text'>Some quick example text.</p>
    <a href='#' class='card-link'>Card link</a>
    <a href='#' class='card-link'>Another link</a>
  </div>
</div>

Tables

Responsive tables with various styling options.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class='table table-striped'>
  <thead>
    <tr>
      <th scope='col'>#</th>
      <th scope='col'>First</th>
      <th scope='col'>Last</th>
      <th scope='col'>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

Form Components

Form Controls

Basic form controls with custom styling.

We'll never share your email with anyone else.
<form>
  <div class='mb-3'>
    <label for='exampleInputEmail1' class='form-label'>Email address</label>
    <input type='email' class='form-control' id='exampleInputEmail1' aria-describedby='emailHelp'>
    <div id='emailHelp' class='form-text'>We'll never share your email with anyone else.</div>
  </div>
  <div class='mb-3'>
    <label for='exampleInputPassword1' class='form-label'>Password</label>
    <input type='password' class='form-control' id='exampleInputPassword1'>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
</form>

Select Menus

Custom select menus with various options.

<select class='form-select' aria-label='Default select example'>
  <option selected>Open this select menu</option>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

Checks and Radios

Custom checkboxes and radio buttons.

<div class='form-check'>
  <input class='form-check-input' type='checkbox' value='' id='flexCheckDefault'>
  <label class='form-check-label' for='flexCheckDefault'>
    Default checkbox
  </label>
</div>

<div class='form-check'>
  <input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>
  <label class='form-check-label' for='flexRadioDefault1'>
    Default radio
  </label>
</div>

Feedback Components

Alerts

Provide contextual feedback messages.

<div class='alert alert-primary' role='alert'>
  A simple primary alert—check it out!
</div>
<div class='alert alert-success' role='alert'>
  A simple success alert—check it out!
</div>
<div class='alert alert-danger' role='alert'>
  A simple danger alert—check it out!
</div>

Buttons

Bootstrap includes several predefined button styles.

<button type='button' class='btn btn-primary'>Primary</button>
<button type='button' class='btn btn-secondary'>Secondary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-info'>Info</button>
Azad Shaikh
All Posts