Bootstrap Grid Examples

22 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Grid System Examples

In this Bootstrap tutorial, you’ll learn how to use Bootstrap 5’s Grid System through practical examples, creating responsive layouts for various use cases like headers, sidebars, and galleries. We’ll pair grids with images for a vibrant look.

What You’ll Learn

Creating an equal-width grid
Building a sidebar layout
Designing a responsive gallery
Combining grids with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Grid Examples

Bootstrap’s Grid System uses a 12-column layout with classes like container, row, and col-* to create responsive designs. Columns adjust with breakpoints (col-sm-*, col-md-*, col-lg-*) for different screen sizes. These examples demonstrate common layouts, inspired by W3Schools’ practical approach.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Equal-Width Grid

Create a grid with equal-width columns that stack on small screens and align horizontally on medium screens. Use this code:

<div class="container">
    <h3>Equal-Width Grid</h3>
    <div class="row">
        <div class="col-md-4 bg-light p-3">
            <h4>Feature 1</h4>
            <p>Stacks on small screens, one-third width on medium (≥768px).</p>
        </div>
        <div class="col-md-4 bg-secondary text-white p-3">
            <h4>Feature 2</h4>
            <p>Equal width on medium screens and above.</p>
        </div>
        <div class="col-md-4 bg-info text-white p-3">
            <h4>Feature 3</h4>
            <p>Responsive and balanced layout.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
row: Creates a horizontal row for columns.
col-md-4: Each column takes 4 of 12 grid units (one-third width) on medium screens (≥768px), stacking on smaller screens.
bg-light, bg-secondary, bg-info: Light, gray, and cyan backgrounds.
text-white: White text for contrast.
p-3: Adds padding.

This layout is ideal for feature sections or product listings.

Step 3: Sidebar Layout

Build a layout with a main content area and a sidebar, responsive across breakpoints. Try this:

<div class="container">
    <h3>Sidebar Layout</h3>
    <div class="row">
        <div class="col-12 col-md-8 col-lg-9 bg-light p-3">
            <h4>Main Content</h4>
            <p>Full width on small screens, 8 columns on medium, 9 on large.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-12 col-md-4 col-lg-3 bg-warning p-3">
            <h4>Sidebar</h4>
            <p>Takes 4 columns on medium, 3 on large screens.</p>
        </div>
    </div>
</div>

Explanation:

col-12 col-md-8 col-lg-9: Main content is full-width on small screens, 8 units on medium (≥768px), 9 on large (≥992px).
col-12 col-md-4 col-lg-3: Sidebar is full-width on small, 4 units on medium, 3 on large.
bg-light, bg-warning: Light and yellow backgrounds.
p-3: Padding for spacing.

This layout suits blogs or dashboards with side navigation.

Step 4: Responsive Gallery

Create a responsive gallery with images that adjust across screen sizes. Add this:

<div class="container">
    <h3>Responsive Gallery</h3>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <div class="card">
                <img src="https://placehold.co/300x200/28a745/ffffff" class="card-img-top" alt="Green placeholder">
                <div class="card-body">
                    <h5 class="card-title">Image 1</h5>
                    <p class="card-text">A nature photo.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <div class="card">
                <img src="https://placehold.co/300x200/007bff/ffffff" class="card-img-top" alt="Blue placeholder">
                <div class="card-body">
                    <h5 class="card-title">Image 2</h5>
                    <p class="card-text">An urban photo.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <div class="card">
                <img src="https://placehold.co/300x200/ff6b6b/ffffff" class="card-img-top" alt="Red placeholder">
                <div class="card-body">
                    <h5 class="card-title">Image 3</h5>
                    <p class="card-text">A portrait photo.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <div class="card">
                <img src="https://placehold.co/300x200/6c757d/ffffff" class="card-img-top" alt="Gray placeholder">
                <div class="card-body">
                    <h5 class="card-title">Image 4</h5>
                    <p class="card-text">An abstract photo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

col-12 col-sm- rischi-6 col-md-4 col-lg-3: Each card is full-width on extra-small (<576px), half-width on small (≥576px), one-third on medium (≥768px), and one-quarter on large (≥992px).
card, card-img-top, card-body: Style gallery items as Bootstrap cards.
Uses 300×200 images in green, blue, red, and gray for vibrancy.
mb-3: Adds margin-bottom for spacing.

This layout is perfect for photo galleries or portfolios.

Step 5: Combine with an Image

Pair a grid layout with a dummy image for context, creating a header-like section. Try this:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">
            <h3>Hero Section</h3>
            <div class="row">
                <div class="col-12 col-md-6 bg-light p-3">
                    <h4>Welcome</h4>
                    <p>Explore our services.</p>
                </div>
                <div class="col-12 col-md-6 bg-secondary text-white p-3">
                    <h4>About Us</h4>
                    <p>Learn about our mission.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

Outer row and col-12 col-md-8, col-12 col-md-4: Content takes 8 units, image takes 4 on medium screens, both stack on small screens.
Nested row with col-12 col-md-6: Two columns (full width on small, half on medium).
bg-light, bg-secondary: Light and gray backgrounds.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

This layout suits homepage headers or promotional sections.

Final Code

Here’s a combined example with varied grid layouts and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Equal-Width Grid</h3>
            <div class="row">
                <div class="col-md-4 bg-light p-3">
                    <h4>Service 1</h4>
                    <p>One-third width on medium screens.</p>
                </div>
                <div class="col-md-4 bg-dark text-white p-3">
                    <h4>Service 2</h4>
                    <p>Stacks on small screens.</p>
                </div>
                <div class="col-md-4 bg-info text-white p-3">
                    <h4>Service 3</h4>
                    <p>Balanced layout.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Sidebar Layout</h3>
            <div class="row">
                <div class="col-12 col-md-8 col-lg-9 bg-light p-3">
                    <h4>Article</h4>
                    <p>Main content area, 9 columns on large screens.</p>
                </div>
                <div class="col-12 col-md-4 col-lg-3 bg-success text-white p-3">
                    <h4>Links</h4>
                    <p>Sidebar with 3 columns on large screens.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-7">
            <h3>Gallery Section</h3>
            <p>Showcase your work.</p>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 bg-light p-3">
                    <h4>Project 1</h4>
                    <p>A web project.</p>
                </div>
                <div class="col-12 col-sm-6 col-md-6 bg-secondary text-white p-3">
                    <h4>Project 2</h4>
                    <p>A design project.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

An equal-width three-column grid (stacked on small, one-third on medium) with light, dark, and cyan backgrounds.
A sidebar layout (stacked on small, 8/4 on medium, 9/3 on large) with light and green backgrounds.
A gallery section (stacked on small, half-width on medium within a larger column) with light and gray backgrounds, beside a red 250×150 image.
All grids are responsive, adapting to screen sizes, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Grid Docs for more options.
Try offset-* classes to shift columns.
Combine with Bootstrap Cards for enhanced gallery styling.

Conclusion

You’ve mastered Bootstrap’s Grid System through practical examples! With classes like col-*, col-md-*, and col-lg-*, plus striking images, you’ve created versatile, responsive layouts for various use cases. Keep experimenting to enhance your webpages.