Bootstrap Grid Examples

Now that you know how the Bootstrap Grid System works across all breakpoints (`sm`, `md`, `lg`, `xl`, `xxl`), let's look at some real-world layout patterns. These are the kinds of grids you will use over and over again when building websites.

---

1. The Classic Blog Layout

A standard blog layout features a wide area for reading the article and a narrower sidebar for widgets, recent posts, or ads. It should stack neatly on mobile phones.

<div class="container">
    <div class="row">
        <div class="col-md-8">Read my amazing article here...</div>
        <div class="col-md-4">Subscribe to my newsletter!</div>
    </div>
</div>

2. Three-Column Footer (or Services)

Websites frequently feature three equal columns highlighting services, pricing plans, or footer information. We want them stacked on phones, but 3-across on everything from a tablet upwards.

<div class="container">
    <div class="row">
        <div class="col-sm-4">Web Design</div>
        <div class="col-sm-4">SEO Marketing</div>
        <div class="col-sm-4">App Development</div>
    </div>
</div>

---

3. Mixed Form Factor Layouts (Mobile to Desktop)

Sometimes you want content to behave differently on three separate devices (Phone vs Tablet vs Desktop). By chaining classes together, you get ultimate control.

• .col-12 (100% width on Phones)
• .col-md-6 (50% width on Tablets)
• .col-lg-3 (25% width on Desktops)

<!-- Resize your browser to see this layout transform multiple times! -->
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">...</div>
        <div class="col-12 col-md-6 col-lg-3">...</div>
        <div class="col-12 col-md-6 col-lg-3">...</div>
        <div class="col-12 col-md-6 col-lg-3">...</div>
    </div>
</div>

---

4. Complex Nested Grids

As you build more advanced UI elements like dashboards, you'll need to place grids inside of grids. Remember: any nested grid must start with a fresh .row inside an existing column.

<div class="container">
    <div class="row">
        
        <div class="col-sm-9">
            Level 1: Main Container
            <div class="row">
                <div class="col-8 col-sm-6">Level 2: Left Split</div>
                <div class="col-4 col-sm-6">Level 2: Right Split</div>
            </div>
        </div>
        
        <div class="col-sm-3">
            Level 1: Right Menu
        </div>

    </div>
</div>

---

The Master Breakpoint Cheat Sheet

To summarize this entire chapter, here is the full cheat sheet for how Bootstrap handles columns across every device known to man: