Bootstrap Grid – Small Devices

22 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Grid for Small Devices

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

What You’ll Learn

Creating a basic small-device grid
Using col-sm-* for responsive layouts
Mixing small and default columns
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 Small Devices

Bootstrap’s Grid System uses a 12-column layout with responsive classes. The col-sm-* class targets small devices (≥576px, e.g., phones in landscape or small tablets). Columns with col-sm-* stack vertically on extra-small screens (<576px) and align horizontally on small screens and above, ensuring mobile-friendly layouts.

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

Step 2: Create a Basic Small-Device Grid

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

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

Explanation:

container: Centers and constrains content.
row: Creates a horizontal row for columns.
col-sm-6: Each column takes 6 of 12 grid units (half-width) on small screens (≥576px), stacking on extra-small (<576px).
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 small devices, stacking on narrower screens.

Step 3: Use Variable Widths for Small Devices

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

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

Explanation:

col-sm-8, col-sm-4: Main content takes 8 units, sidebar takes 4 on small screens (≥576px), both stack on extra-small.
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 small devices.

Step 4: Mix Small and Default Columns

Combine col-* and col-sm-* for different behaviors on extra-small and small screens. Add this:

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

Explanation:

col-6 col-sm-4: First two columns are half-width on extra-small (<576px), one-third on small (≥576px).
col-12 col-sm-4: Third column is full-width on extra-small, one-third on small.
bg-info, bg-warning, bg-light: Cyan, yellow, and light backgrounds.
text-white: White text where needed.
p-3: Padding for spacing.

This grid mixes default and small-device breakpoints for flexibility.

Step 5: Combine with an Image

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

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8">
            <h3>Gallery Grid</h3>
            <p>Showcase your images.</p>
            <div class="row">
                <div class="col-12 col-sm-6 bg-light p-3">
                    <h4>Image 1</h4>
                    <p>A landscape photo.</p>
                </div>
                <div class="col-12 col-sm-6 bg-secondary text-white p-3">
                    <h4>Image 2</h4>
                    <p>An urban photo.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-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-sm-8, col-12 col-sm-4: Grid takes 8 units, image takes 4 on small screens, both stack on extra-small.
Nested row with col-12 col-sm-6: Two columns (full width on extra-small, half on small screens).
bg-light, bg-secondary: Light and gray backgrounds for gallery items.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

The image enhances the gallery context.

Final Code

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

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Small-Device Grid</h3>
            <div class="row">
                <div class="col-sm-6 bg-light p-3">
                    <h4>Column A</h4>
                    <p>Half-width on small screens, stacks on extra-small.</p>
                </div>
                <div class="col-sm-6 bg-dark text-white p-3">
                    <h4>Column B</h4>
                    <p>Horizontal on small devices.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Mixed Small Grid</h3>
            <div class="row">
                <div class="col-6 col-sm-4 bg-primary text-white p-3">
                    <h4>Item 1</h4>
                    <p>Half on extra-small, one-third on small.</p>
                </div>
                <div class="col-6 col-sm-4 bg-success text-white p-3">
                    <h4>Item 2</h4>
                    <p>Adjusts for small devices.</p>
                </div>
                <div class="col-12 col-sm-4 bg-info text-white p-3">
                    <h4>Item 3</h4>
                    <p>Full on extra-small, one-third on small.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-7">
            <h3>Portfolio Grid</h3>
            <p>Display your projects.</p>
            <div class="row">
                <div class="col-12 col-sm-6 bg-light p-3">
                    <h4>Project 1</h4>
                    <p>A web project.</p>
                </div>
                <div class="col-12 col-sm-6 bg-secondary text-white p-3">
                    <h4>Project 2</h4>
                    <p>A design project.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-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 extra-small, half-width on small screens) with light and dark backgrounds.
A three-column grid (half/full on extra-small, one-third on small screens) with blue, green, and cyan backgrounds.
A portfolio grid (stacked on extra-small, half-width on small screens within a larger column) with light and gray backgrounds, beside a red 250×150 image.
All grids are responsive, optimized for small devices (≥576px), with colorful images for a vibrant look.

Next Steps

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

Conclusion

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