2025 Bootstrap Cheatsheet | SheCodes

SheCodes Bootstrap Cheatsheet

SheCodes Bootstrap cheatsheet

About this website and SheCodes
This website was built using technologies taught in SheCodes Coding Workshops including HTML, CSS, JavaScript, React, GitHub, Bootstrap and APIs. SheCodes teaches coding skills to busy women 👩‍💻
Snippets categories:AllGeneralGridButtonsFormsFlexboxNavigationCardsUtility ClassesSpacingImage

General

Import Bootstrap

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <!-- Content here -->
  </div>
</body>
</html>
Bootstrap

Grid

Equal column width grid

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
Bootstrap

Auto-layout columns grid

<div class="container">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
Bootstrap

Nested grids

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>
Bootstrap

Responsive grid

<div class="row">
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
</div>
Bootstrap

Buttons

Standard buttons

<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>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Bootstrap

Outline buttons

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Bootstrap

Large buttons

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
Bootstrap

Small buttons

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Bootstrap

Forms

Inputs

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

  <label for="description" class="form-label">Example text area</label>
  <textarea class="form-control" id="description" rows="3"></textarea>
</form>
Bootstrap

Flexbox

Justify content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Bootstrap

Navigation

Responsive navigation

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <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" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Bootstrap

Cards

Simple card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Bootstrap

Utility Classes

Background

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Bootstrap

Borders

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Bootstrap

Colors

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
Bootstrap

Display property

<div class="d-inline">
  display inline
</div>
<span class="d-block">
  display block
</span>
<span class="d-flex">
  display flex
</span>
<span class="d-none">
  display none
</span>
<div class="d-none d-lg-block">
  Visible on large screens, hidden on smaller resolutions
</div>
Bootstrap

Shadows

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Larger shadow</div>
Bootstrap

Text

<p class="text-center">Center aligned text</p>
<p class="text-end">End aligned text</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
<p class="fw-bold">Bold text.</p>
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
Bootstrap

Spacing

Margin

<div class="m-0">
  No margin
</div>
<div class="mt-5">
  Large margin top
</div>
<div class="mt-5 mr-5">
  Large margin top and right
</div>
<div class="m-5">
  Large margin
</div>
<div class="m-3 ml-1">
  Medium margin and small margin left
</div>
Bootstrap

Padding

<div class="p-0">
  No padding
</div>
<div class="pt-5">
  Large padding top
</div>
<div class="pt-5 pr-5">
  Large padding top and right
</div>
<div class="p-5">
  Large padding
</div>
<div class="p-3 pl-1">
  Medium padding and small padding left
</div>
Bootstrap

Image

Responsive image


<img src="..." class="img-fluid" alt="...">
Bootstrap
👩‍💻

What is SheCodes?

SheCodes teaches coding skills to busy women
Start your dream career in tech

Learn more about SheCodes

4.9/5, our workshops are highly recommended by
230,000+ women, including employees from these companies

📬

Join Our Mailing List

Be the first to know about upcoming coding workshops, new coding tools, and other SheCodes related news.