Bootstrap Cheat Sheet

Below is a Bootstrap cheat sheet to help you quickly reference common components and classes:

Bootstrap Grid System

Container:

<div class="container">
  <!-- Content goes here -->
</div>

Row:

<div class="row">
  <!-- Columns go here -->
</div>

Columns:

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

Bootstrap Typography

Headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- ... -->
<h6>Heading 6</h6>

Text Alignment:

<p class="text-left">Left-aligned text.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-right">Right-aligned text.</p>
<p class="text-justify">Justified text.</p>

Bootstrap Buttons

Button Styles:

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<!-- ... -->

Button Sizes:

<button type="button" class="btn btn-lg btn-primary">Large Button</button>
<button type="button" class="btn btn-sm btn-secondary">Small Button</button>

Bootstrap Forms

Form Controls:

<input type="text" class="form-control" placeholder="Text Input">
<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <!-- ... -->
</select>

Form Groups:

<div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

Bootstrap Navigation

Navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <!-- Navbar content goes here -->
</nav>

Navbar Links:

<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <!-- ... -->
</ul>

Bootstrap Alerts

Alert Styles:

<div class="alert alert-success" role="alert">
  Success alert!
</div>
<div class="alert alert-danger" role="alert">
  Danger alert!
</div>
<!-- ... -->

Dismissible Alert:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning alert! <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

Bootstrap Badges

Badges:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<!-- ... -->

Pill Badges:

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<!-- ... -->

These examples cover some common Bootstrap components. For more details and options, refer to the official Bootstrap documentation.