Bootstrap Cheat Sheet

<div class="container">Fixed width</div>
<div class="container-fluid">Full width</div>
<div class="container-md">Responsive container</div>

<div class="row">
  <div class="col-md-8">Main content</div>
  <div class="col-md-4">Sidebar</div>
</div>

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">Card 1</div>
  <div class="col">Card 2</div>
  <div class="col">Card 3</div>
</div>

<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>
<div class="d-flex flex-column gap-3">

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary btn-sm">Small</button>
<button class="btn btn-danger btn-lg" disabled>Disabled</button>
<a href="#" class="btn btn-link">Link</a>

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Description</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>

<div class="alert alert-success alert-dismissible fade show">
  Success! <button class="btn-close" data-bs-dismiss="alert"></button>
</div>
<span class="badge bg-primary">New</span>
<span class="badge rounded-pill bg-danger">99+</span>

<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="mb-3">
  <label class="form-label">Email</label>
  <input type="email" class="form-control" placeholder="name@example.com">
</div>
<select class="form-select">
  <option selected>Choose...</option>
  <option value="1">One</option>
</select>

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

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <label for="email">Email address</label>
</div>

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
  <button class="btn btn-primary">Search</button>
</div>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1">Content</div>
</div>

m-3     /* margin: 1rem */
mt-5    /* margin-top: 3rem */
px-4    /* padding-x: 1.5rem */
py-2    /* padding-y: 0.5rem */
mx-auto /* center horizontally */
gap-3   /* gap: 1rem */

text-center text-md-start
text-primary text-muted text-white
fw-bold fw-light
fs-1 through fs-6
text-truncate
text-decoration-none

d-none d-md-block      /* Hidden on mobile */
d-block d-md-none      /* Mobile only */
d-flex d-inline-flex
invisible / visible
overflow-auto / overflow-hidden

bg-primary bg-light bg-dark
bg-opacity-75
border border-primary
rounded rounded-pill rounded-circle
shadow shadow-sm shadow-lg