Bootstrap: Grid System & Layout

Bootstrap 5 uses a 12-column flexbox grid. Breakpoints: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px). No jQuery dependency in Bootstrap 5.

Installation

<!-- CDN (quickest) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- npm (recommended for projects) -->
<!-- npm install bootstrap -->
<!-- import 'bootstrap/dist/css/bootstrap.min.css' -->
<!-- import 'bootstrap/dist/js/bootstrap.bundle.min.js' -->

Container

<!-- Fixed max-width that changes at each breakpoint -->
<div class="container">...</div>

<!-- Always 100% width -->
<div class="container-fluid">...</div>

<!-- 100% until specific breakpoint, then fixed -->
<div class="container-md">...</div>   <!-- fluid until md, then fixed -->

Grid Basics

<!-- 12-column grid: container > row > col -->
<div class="container">
  <div class="row">
    <div class="col-6">Half width</div>
    <div class="col-6">Half width</div>
  </div>

  <!-- Responsive: full on mobile, half on md+ -->
  <div class="row">
    <div class="col-12 col-md-6">Left</div>
    <div class="col-12 col-md-6">Right</div>
  </div>

  <!-- Auto columns — equal width -->
  <div class="row">
    <div class="col">Equal</div>
    <div class="col">Equal</div>
    <div class="col">Equal</div>
  </div>

  <!-- Mixed: one column takes fixed width, others fill -->
  <div class="row">
    <div class="col">Auto</div>
    <div class="col-6">Fixed 6</div>
    <div class="col">Auto</div>
  </div>
</div>

Alignment & Gutters

<!-- Row alignment (flexbox) -->
<div class="row align-items-start">...</div>   <!-- vertical: top -->
<div class="row align-items-center">...</div>  <!-- vertical: center -->
<div class="row align-items-end">...</div>     <!-- vertical: bottom -->

<div class="row justify-content-center">...</div>  <!-- horizontal: center -->
<div class="row justify-content-between">...</div> <!-- horizontal: space-between -->
<div class="row justify-content-end">...</div>     <!-- horizontal: right -->

<!-- Column alignment override -->
<div class="col align-self-center">...</div>

<!-- Gutters (spacing between columns) -->
<div class="row g-3">...</div>     <!-- gap: 1rem on both axes -->
<div class="row gx-5 gy-3">...</div>  <!-- x-gap: 3rem, y-gap: 1rem -->
<div class="row g-0">...</div>     <!-- no gutters -->

<!-- Offset — push column to the right -->
<div class="col-md-4 offset-md-4">Centered single column</div>

<!-- Order -->
<div class="col order-md-last">Last on md+</div>
<div class="col order-md-first">First on md+</div>

Flexbox Utilities

<!-- d-flex — apply flexbox to any element -->
<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">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- flex-wrap, flex-nowrap -->
<div class="d-flex flex-wrap gap-2">
  <span class="badge bg-primary">Tag 1</span>
  <span class="badge bg-primary">Tag 2</span>
</div>

<!-- ms-auto — margin-start auto (push to end) -->
<nav class="d-flex align-items-center">
  <a class="navbar-brand">Logo</a>
  <ul class="d-flex gap-3 ms-auto list-unstyled mb-0">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Bootstrap: Components

Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">MyApp</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 ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Account</a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Buttons & Badges

<!-- Variants: primary, secondary, success, danger, warning, info, light, dark -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-sm btn-danger">Small Danger</button>
<button class="btn btn-lg btn-success">Large Success</button>
<button class="btn btn-primary" disabled>Disabled</button>

<!-- Loading state -->
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>Loading...
</button>

<!-- Button group -->
<div class="btn-group">
  <button class="btn btn-outline-primary">Left</button>
  <button class="btn btn-outline-primary">Middle</button>
  <button class="btn btn-outline-primary">Right</button>
</div>

<!-- Badge -->
<h5>Notifications <span class="badge bg-danger">4</span></h5>
<span class="badge text-bg-primary rounded-pill">New</span>

Cards & Alerts

<!-- Card -->
<div class="card" style="max-width: 400px;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some content here.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-body-secondary">
    Last updated 3 mins ago
  </div>
</div>

<!-- Card deck (equal height) -->
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col"><div class="card h-100">...</div></div>
  <div class="col"><div class="card h-100">...</div></div>
  <div class="col"><div class="card h-100">...</div></div>
</div>

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!</strong> Your changes have been saved.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-danger">Something went wrong.</div>

Modal & Forms

<!-- Modal trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Action</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Are you sure you want to delete this item?</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

<!-- Form -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
    <div class="form-text">We'll never share your email.</div>
  </div>
  <div class="mb-3">
    <label for="select1" class="form-label">Select</label>
    <select class="form-select" id="select1">
      <option selected>Choose...</option>
      <option>One</option>
    </select>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">Agree to terms</label>
  </div>
  <div class="was-validated mb-3">
    <input type="text" class="form-control" required>
    <div class="invalid-feedback">This field is required.</div>
    <div class="valid-feedback">Looks good!</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap: Utilities & Customization

Spacing & Sizing Utilities

<!-- Spacing: m=margin, p=padding; t/b/s/e/x/y=top/bottom/start/end/x-axis/y-axis -->
<!-- Sizes: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem, auto -->

<div class="mt-3 mb-5 px-4 py-2">spacing</div>
<div class="m-auto" style="width: 200px">horizontally centered block</div>
<div class="ms-auto">push to end in flex container</div>

<!-- Sizing -->
<div class="w-50">50% width of parent</div>
<div class="w-100">Full width</div>
<div class="h-100">Full height</div>
<img class="mw-100">  <!-- max-width: 100% -->

<!-- Overflow -->
<div class="overflow-auto" style="max-height: 200px">scrollable</div>
<div class="overflow-hidden">clipped</div>

Typography & Color Utilities

<!-- Text -->
<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>
<p class="text-start text-md-center">Left on mobile, centered on md+</p>
<p class="fw-bold">Bold</p>
<p class="fw-light">Light</p>
<p class="fst-italic">Italic</p>
<p class="text-decoration-underline">Underline</p>
<p class="text-uppercase">uppercase</p>
<p class="text-truncate" style="width: 200px">Long text that gets truncated...</p>
<p class="fs-1">Largest (h1 size)</p>
<p class="fs-6">Smallest (h6 size)</p>

<!-- Colors (text) -->
<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-muted">Muted (secondary text)</p>
<p class="text-body-secondary">Body secondary</p>

<!-- Background -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-light p-3">Light background</div>
<div class="bg-body-tertiary p-3">Subtle background (bs5.3+)</div>

<!-- Display -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-block d-md-none">Visible on mobile, hidden on md+</div>
<span class="d-inline-block">inline-block</span>

Customization with Sass

// 1. Override Bootstrap variables BEFORE importing Bootstrap
// custom.scss

// Theme colors
$primary:   #6f42c1;   // purple
$secondary: #6c757d;
$success:   #198754;

// Spacing scale (default: 1rem)
$spacer: 1.25rem;

// Border radius
$border-radius:    0.5rem;
$border-radius-lg: 1rem;

// Fonts
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Grid
$grid-gutter-width: 2rem;

// 2. Import Bootstrap
@import 'bootstrap/scss/bootstrap';

// 3. Add your custom styles after
.btn {
  font-weight: 500;
  letter-spacing: 0.025em;
}

// Generate additional utility classes
.text-purple { color: $primary; }

// Use Bootstrap mixins
.my-component {
  @include media-breakpoint-up(md) {
    display: flex;
  }
  @include border-radius($border-radius-lg);
}

JavaScript API

// Initialize components programmatically
import { Modal, Tooltip, Toast, Collapse } from 'bootstrap'

// Modal
const modal = new Modal('#myModal', { backdrop: 'static', keyboard: false })
modal.show()
modal.hide()
modal.toggle()

// Events
document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
  console.log('modal shown')
})

// Tooltip (must initialize manually)
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltips.forEach(el => new Tooltip(el))

// Toast
const toastEl = document.getElementById('toast')
const toast = new Toast(toastEl, { delay: 3000 })
toast.show()

// Offcanvas
import { Offcanvas } from 'bootstrap'
const offcanvas = new Offcanvas('#sidebar')
offcanvas.show()