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 System

22 April 2025 | Category:

Bootstrap Tutorial: Master the Grid System

In this Bootstrap tutorial, you’ll learn how to use Bootstrap 5’s Grid System to create responsive layouts with rows and columns, perfect for websites or apps. We’ll pair grids with images for a vibrant look.

What You’ll Learn

  • Creating a basic grid layout
  • Using responsive column classes
  • Nesting grids
  • 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 the Bootstrap Grid System

Bootstrap’s Grid System uses a 12-column layout with classes like container, row, and col-* to create responsive designs. Columns adjust based on screen size (e.g., col-sm-6 for small screens), making layouts flexible for mobile, tablet, and desktop.

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

Step 2: Create a Basic Grid Layout

Start with a simple two-column grid. Use this code:

<div class="container">
    <h3>Basic Grid Layout</h3>
    <div class="row">
        <div class="col-6 bg-light p-3">
            <h4>Column 1</h4>
            <p>This is the first column, taking half the row.</p>
        </div>
        <div class="col-6 bg-secondary text-white p-3">
            <h4>Column 2</h4>
            <p>This is the second column, also half the row.</p>
        </div>
    </div>
</div>

Explanation:

  • container: Centers and constrains content.
  • row: Creates a horizontal row for columns.
  • col-6: Each column takes 6 of the 12 grid units (half the row).
  • bg-light, bg-secondary: Add light and gray backgrounds for visibility.
  • p-3: Adds padding to columns.
  • text-white: White text for contrast on the gray background.

This creates a two-column layout that’s equal on all screen sizes.

Step 3: Use Responsive Column Classes

Make the grid responsive with breakpoint-specific classes (e.g., col-sm-*, col-md-*). Try this:

<div class="container">
    <h3>Responsive Grid</h3>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 bg-primary text-white p-3">
            <h4>Column 1</h4>
            <p>Full width on small screens, half on medium, one-third on large.</p>
        </div>
        <div class="col-12 col-md-6 col-lg-4 bg-success text-white p-3">
            <h4>Column 2</h4>
            <p>Adjusts with screen size for responsive design.</p>
        </div>
        <div class="col-12 col-md-12 col-lg-4 bg-info text-white p-3">
            <h4>Column 3</h4>
            <p>Full width on medium, one-third on large screens.</p>
        </div>
    </div>
</div>

Explanation:

  • col-12: Full width on extra-small screens (<576px).
  • col-md-6: Half width on medium screens (≥768px) for the first two columns.
  • col-md-12: Full width on medium 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 adapts to different screen sizes.

Step 4: Nest Grids

Nest a grid inside a column for complex layouts. Add this:

<div class="container">
    <h3>Nested Grid</h3>
    <div class="row">
        <div class="col-8 bg-light p-3">
            <h4>Main Column</h4>
            <p>This column contains a nested grid.</p>
            <div class="row">
                <div class="col-6 bg-secondary text-white p-2">
                    <p>Nested Column 1</p>
                </div>
                <div class="col-6 bg-dark text-white p-2">
                    <p>Nested Column 2</p>
                </div>
            </div>
        </div>
        <div class="col-4 bg-warning p-3">
            <h4>Sidebar</h4>
            <p>This is a sidebar column.</p>
        </div>
    </div>
</div>

Explanation:

  • col-8: Main column takes 8 of 12 grid units.
  • col-4: Sidebar takes 4 units.
  • Nested row inside col-8: Creates a sub-grid.
  • col-6 (nested): Each nested column takes half the parent column’s width.
  • bg-light, bg-warning, bg-secondary, bg-dark: Light, yellow, gray, and dark backgrounds.
  • p-3, p-2: Padding for spacing.

This shows how to create a layout within a column.

Step 5: Combine with an Image

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

<div class="container">
    <div class="row">
        <div class="col-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-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

  • row and col-8, col-4: Splits content into grid (8 units) and image (4 units).
  • Nested row with col-12 col-md-6: Creates two columns (full width on small 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 grid layouts and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Grid</h3>
            <div class="row">
                <div class="col-6 bg-light p-3">
                    <h4>Column A</h4>
                    <p>Half the row on all screens.</p>
                </div>
                <div class="col-6 bg-dark text-white p-3">
                    <h4>Column B</h4>
                    <p>Other half of the row.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Responsive 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>Adjusts across screen sizes.</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-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-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 with light and dark backgrounds.
  • A responsive three-column grid (full width on extra-small, half on small, one-third on medium) with blue, green, and cyan backgrounds.
  • A gallery grid with two responsive columns (full width on small, half on medium) and a red 250×150 image.
  • All grids are responsive, adjusting 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.
  • Use g-* classes for custom gutters.

Conclusion

You’ve mastered the Bootstrap Grid System! With classes like container, row, and col-*, plus striking images, you’ve created flexible, responsive layouts. Keep experimenting to enhance your webpages.