Bootstrap 5 Grid System & Responsive Design

Bootstrap's grid system is the foundation of responsive web design. It uses a 12-column layout that adapts to different screen sizes. Master it, and you can build any layout from simple landing pages to complex dashboards.

How the Grid Works

Bootstrap's grid is built on three key concepts:

• Containers — Center and pad your content
• Rows — Horizontal groups of columns
• Columns — The actual content holders (12 per row)

<!-- Basic grid structure -->
<div class="container">
    <div class="row">
        <div class="col-md-8">Main content (8/12 columns)</div>
        <div class="col-md-4">Sidebar (4/12 columns)</div>
    </div>
</div>

Breakpoints

Bootstrap uses these breakpoints to create responsive layouts:

Common Layouts

Equal Columns

<div class="row">
    <div class="col">Auto width 1</div>
    <div class="col">Auto width 2</div>
    <div class="col">Auto width 3</div>
</div>

Product Cards Grid

<!-- 1 col on phone, 2 on tablet, 3 on desktop, 4 on large -->
<div class="row g-4">
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
        <div class="card h-100">Product 1</div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
        <div class="card h-100">Product 2</div>
    </div>
    <!-- ... more products -->
</div>

Dashboard Layout

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar: hidden on mobile, 3 cols on desktop -->
        <nav class="col-md-3 col-lg-2 d-none d-md-block bg-light">
            Sidebar navigation
        </nav>

        <!-- Main: full width on mobile, remaining cols on desktop -->
        <main class="col-md-9 col-lg-10">
            <!-- Stats row -->
            <div class="row g-3 mb-4">
                <div class="col-6 col-lg-3">Stat card 1</div>
                <div class="col-6 col-lg-3">Stat card 2</div>
                <div class="col-6 col-lg-3">Stat card 3</div>
                <div class="col-6 col-lg-3">Stat card 4</div>
            </div>
        </main>
    </div>
</div>

Flexbox Utilities

Bootstrap 5 includes powerful Flexbox utilities that work alongside the grid:

<!-- Center content vertically and horizontally -->
<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
    <h2>Perfectly centered</h2>
</div>

<!-- Space items evenly -->
<div class="d-flex justify-content-between">
    <span>Left</span>
    <span>Right</span>
</div>

<!-- Responsive flex direction -->
<div class="d-flex flex-column flex-md-row gap-3">
    <!-- Stacked on mobile, side-by-side on tablet+ -->
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Spacing Utilities

<!-- Responsive spacing -->
<div class="py-3 py-md-5">
    <!-- py-3 on mobile, py-5 on tablet+ -->
</div>

<!-- Center a block element -->
<div class="mx-auto" style="max-width: 600px;">Centered</div>

Display & Visibility

<!-- Show/hide at different breakpoints -->
<div class="d-none d-md-block">Hidden on mobile, visible on tablet+</div>
<div class="d-block d-md-none">Visible only on mobile</div>
<div class="d-none d-lg-flex">Flex container, visible on desktop+</div>

Summary

• Always structure as: container → row → col-*
• Columns must add up to 12 (or use auto-width col)
• Design mobile-first: start with the smallest breakpoint
• Use g-* for gutters, d-* for display, flex-* for alignment
• Combine breakpoints for truly responsive layouts