Bootstrap

Bootstrap is a popular, open-source front-end framework used for designing responsive and mobile-first websites. Originally developed by Twitter, it provides a collection of pre-styled components, grid systems, and JavaScript plugins. Bootstrap simplifies the process of creating modern, visually appealing user interfaces, and it works seamlessly across different screen sizes and devices.

Bootstrap Grid – Stacked/Horizontal

22 April 2025 | Category:

Bootstrap Tutorial: Stacked-to-Horizontal Grid

In this Bootstrap tutorial, you’ll learn how to use Bootstrap 5’s Grid System to create a layout that stacks columns vertically on small screens and aligns them horizontally on larger screens, perfect for responsive designs. We’ll pair grids with images for a vibrant look.

What You’ll Learn

  • Creating a basic stacked-to-horizontal grid
  • Using breakpoint-specific classes
  • Adjusting column widths
  • 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 Stacked-to-Horizontal Grids

Bootstrap’s Grid System uses a 12-column layout with responsive classes (e.g., col-sm-*, col-md-*) to control column behavior. For a stacked-to-horizontal grid, columns are full-width (col-12) on small screens and split (e.g., col-md-6) on larger screens, transitioning from vertical stacking to horizontal alignment.

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

Step 2: Create a Basic Stacked-to-Horizontal 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 Stacked-to-Horizontal Grid</h3>
    <div class="row">
        <div class="col-12 col-md-6 bg-light p-3">
            <h4>Column 1</h4>
            <p>Stacks vertically on small screens, half-width on medium screens.</p>
        </div>
        <div class="col-12 col-md-6 bg-secondary text-white p-3">
            <h4>Column 2</h4>
            <p>Aligns horizontally on larger screens.</p>
        </div>
    </div>
</div>

Explanation:

  • container: Centers and constrains content.
  • row: Creates a horizontal row for columns.
  • col-12: Full width on extra-small screens (<576px), stacking columns.
  • col-md-6: Half width (6 of 12 grid units) on medium screens (≥768px), making columns horizontal.
  • 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 stacks vertically on mobile and aligns horizontally on medium screens.

Step 3: Use Multiple Breakpoints

Incorporate multiple breakpoints (e.g., sm, md, lg) for finer control. Try this:

<div class="container">
    <h3>Multi-Breakpoint Grid</h3>
    <div class="row">
        <div class="col-12 col-sm-6 col-lg-4 bg-primary text-white p-3">
            <h4>Column 1</h4>
            <p>Full width on small, half on small screens, one-third on large.</p>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 bg-success text-white p-3">
            <h4>Column 2</h4>
            <p>Stacks on mobile, horizontal on small and large screens.</p>
        </div>
        <div class="col-12 col-sm-12 col-lg-4 bg-info text-white p-3">
            <h4>Column 3</h4>
            <p>Full width on small, one-third on large 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-lg-4: One-third width on large screens (≥992px) for all columns.
  • bg-primary, bg-success, bg-info: Blue, green, and cyan backgrounds.
  • text-white: White text for readability.

This grid transitions from stacked to horizontal at different breakpoints.

Step 4: Adjust Column Widths

Vary column widths for asymmetry. Add this:

<div class="container">
    <h3>Asymmetric Grid</h3>
    <div class="row">
        <div class="col-12 col-md-8 bg-light p-3">
            <h4>Main Content</h4>
            <p>Takes 8 columns on medium screens, full width on small.</p>
        </div>
        <div class="col-12 col-md-4 bg-warning p-3">
            <h4>Sidebar</h4>
            <p>Takes 4 columns on medium screens, stacks on small.</p>
        </div>
    </div>
</div>

Explanation:

  • col-12: Full width on small screens, stacking vertically.
  • col-md-8, col-md-4: Main content takes 8 units, sidebar takes 4 on medium screens (≥768px).
  • bg-light, bg-warning: Light and yellow backgrounds.
  • p-3: Padding for spacing.

This creates an uneven stacked-to-horizontal layout.

Step 5: Combine with an Image

Pair a stacked-to-horizontal 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 work.</p>
            <div class="row">
                <div class="col-12 col-sm-6 bg-light p-3">
                    <h4>Project 1</h4>
                    <p>A web development 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-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: Splits content into grid (8 units) and image (4 units) on medium screens, stacked on 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 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 stacked-to-horizontal grids and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Stacked-to-Horizontal</h3>
            <div class="row">
                <div class="col-12 col-md-6 bg-light p-3">
                    <h4>Column A</h4>
                    <p>Stacks on small, half-width on medium.</p>
                </div>
                <div class="col-12 col-md-6 bg-dark text-white p-3">
                    <h4>Column B</h4>
                    <p>Horizontal on medium screens.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Multi-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>Stacks on 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 column layout.</p>
                </div>
                <div class="col-12 col-sm-12 col-md-4 bg-info text-white p-3">
                    <h4>Item 3</h4>
                    <p>Full width 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-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-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 (stacked on extra-small, half/full on small, one-third on medium) with blue, green, and cyan backgrounds.
  • A gallery grid (stacked on 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, transitioning from stacked to horizontal, with colorful images for a vibrant look.

Next Steps

  • Check the Bootstrap Grid Docs for more options.
  • Try col-auto for content-driven column widths.
  • Use order-* classes to reorder columns on different breakpoints.

Conclusion

You’ve mastered Bootstrap’s Stacked-to-Horizontal Grid! With classes like col-12, col-sm-*, and col-md-*, plus striking images, you’ve created responsive layouts that stack on small screens and align horizontally on larger ones. Keep experimenting to enhance your webpages.