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>