Bootstrap Grid – Medium Devices

22 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Grid for Medium Devices

In this Bootstrap tutorial, you’ll learn how to use Bootstrap 5’s Grid System to create responsive layouts optimized for medium devices (e.g., tablets ≥768px) using col-md-* classes. We’ll pair grids with images for a vibrant look.

What You’ll Learn

Creating a basic medium-device grid
Using col-md-* for responsive layouts
Mixing medium and other breakpoints
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 Grid for Medium Devices

Bootstrap’s Grid System uses a 12-column layout with responsive classes. The col-md-* class targets medium devices (≥768px, e.g., tablets). Columns with col-md-* stack vertically on smaller screens (<768px) and align horizontally on medium screens and above, ensuring tablet-friendly layouts.

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

Step 2: Create a Basic Medium-Device Grid

Start with a two-column grid that stacks on small screens and becomes horizontal on medium screens. Use this code:

<div class="container">
    <h3>Basic Medium-Device Grid</h3>
    <div class="row">
        <div class="col-md-6 bg-light p-3">
            <h4>Column 1</h4>
            <p>Stacks on small screens, half-width on medium (≥768px).</p>
        </div>
        <div class="col-md-6 bg-secondary text-white p-3">
            <h4>Column 2</h4>
            <p>Horizontal on medium devices.</p>
        </div>
    </div>
</div>

Explanation:

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

This grid is optimized for medium devices, stacking on smaller screens.

Step 3: Use Variable Widths for Medium Devices

Create a grid with uneven column widths on medium screens. Try this:

<div class="container">
    <h3>Variable Width Grid</h3>
    <div class="row">
        <div class="col-md-8 bg-primary text-white p-3">
            <h4>Main Content</h4>
            <p>Takes 8 columns on medium screens, full width on smaller screens.</p>
        </div>
        <div class="col-md-4 bg-success text-white p-3">
            <h4>Sidebar</h4>
            <p>Takes 4 columns on medium screens.</p>
        </div>
    </div>
</div>

Explanation:

col-md-8, col-md-4: Main content takes 8 units, sidebar takes 4 on medium screens (≥768px), both stack on smaller screens.
bg-primary, bg-success: Blue and green backgrounds.
text-white: White text for readability.
p-3: Padding for spacing.

This creates an asymmetric layout for medium devices.

Step 4: Mix Medium and Other Breakpoints

Combine col-*, col-sm-*, and col-md-* for different behaviors across breakpoints. Add this:

<div class="container">
    <h3>Mixed Breakpoint Grid</h3>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 bg-info text-white p-3">
            <h4>Column 1</h4>
            <p>Full on extra-small, half on small, one-third on medium.</p>
        </div>
        <div class="col-12 col-sm-6 col-md-4 bg-warning p-3">
            <h4>Column 2</h4>
            <p>Adjusts from full to half to one-third width.</p>
        </div>
        <div class="col-12 col-sm-12 col-md-4 bg-light p-3">
            <h4>Column 3</h4>
            <p>Full on small, one-third on medium screens.</p>
        </div>
    </div>
</div>

Explanation:

col-12: Full width on extra-small screens (<576px).
col-sm-6: Half width on small screens (≥576px) for the first two columns.
col-sm-12: Full width on small screens for the third column.
col-md-4: One-third width on medium screens (≥768px) for all columns.
bg-info, bg-warning, bg-light: Cyan, yellow, and light backgrounds.
text-white: White text where needed.
p-3: Padding for spacing.

This grid adapts across breakpoints, with a focus on medium devices.

Step 5: Combine with an Image

Pair a medium-device grid with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">
            <h3>Portfolio Grid</h3>
            <p>Showcase your projects.</p>
            <div class="row">
                <div class="col-12 col-md-6 bg-light p-3">
                    <h4>Project 1</h4>
                    <p>A web development project.</p>
                </div>
                <div class="col-12 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-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: Grid takes 8 units, image takes 4 on medium screens, both stack on smaller screens.
Nested row with col-12 col-md-6: Two columns (full width on smaller screens, half on medium).
bg-light, bg-secondary: Light and gray backgrounds for projects.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

The image enhances the portfolio context.

Final Code

Here’s a combined example with varied medium-device grids and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Medium-Device Grid</h3>
            <div class="row">
                <div class="col-md-6 bg-light p-3">
                    <h4>Column A</h4>
                    <p>Half-width on medium screens, stacks on smaller screens.</p>
                </div>
                <div class="col-md-6 bg-dark text-white p-3">
                    <h4>Column B</h4>
                    <p>Horizontal on medium devices.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Mixed Breakpoint Grid</h3>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3">
                    <h4>Item 1</h4>
                    <p>Full on extra-small, half on small, one-third on medium.</p>
                </div>
                <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3">
                    <h4>Item 2</h4>
                    <p>Responsive across breakpoints.</p>
                </div>
                <div class="col-12 col-sm-12 col-md-4 bg-info text-white p-3">
                    <h4>Item 3</h4>
                    <p>Full on small, one-third on medium.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-7">
            <h3>Gallery Grid</h3>
            <p>Display your images.</p>
            <div class="row">
                <div class="col-12 col-md-6 bg-light p-3">
                    <h4>Image 1</h4>
                    <p>A landscape photo.</p>
                </div>
                <div class="col-12 col-md-6 bg-secondary text-white p-3">
                    <h4>Image 2</h4>
                    <p>An urban photo.</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:

A simple two-column grid (stacked on small screens, half-width on medium) with light and dark backgrounds.
A three-column grid (full/half on extra-small/small, one-third on medium) with blue, green, and cyan backgrounds.
A gallery grid (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, optimized for medium devices (≥768px), with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Grid Docs for more options.
Try col-md-auto for content-driven widths on medium screens.
Combine with col-lg-* for large-screen layouts.

Conclusion

You’ve mastered Bootstrap’s Grid for Medium Devices! With col-md-* classes and a 12-column system, plus striking images, you’ve created layouts that stack on small screens and align horizontally on medium devices. Keep experimenting to enhance your webpages.