Bootstrap Grid Examples

The Bootstrap Grid System is the backbone of responsive web design, offering an easy way to create layouts that adapt to different screen sizes. Whether you’re a beginner or a seasoned developer, seeing practical examples can help you better understand how to use Bootstrap’s grid system effectively.

At TheCodingCollege.com, we’ll walk you through 10 grid examples ranging from simple layouts to advanced responsive designs. You’ll learn how to use classes like .container, .row, and .col-* to build modern web pages effortlessly.

1. Simple 12-Column Grid

Bootstrap’s grid system divides the layout into 12 equal columns. You can use any combination of column widths as long as their total adds up to 12.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: lightblue;">Column 1 (4/12)</div>
        <div class="col-md-4" style="background-color: lightgreen;">Column 2 (4/12)</div>
        <div class="col-md-4" style="background-color: lightcoral;">Column 3 (4/12)</div>
    </div>
</div>

2. Stacked-to-Horizontal Grid

On smaller screens, columns stack vertically, but on medium and larger screens, they align horizontally.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6" style="background-color: lightblue;">50% Width</div>
        <div class="col-xs-12 col-md-6" style="background-color: lightgreen;">50% Width</div>
    </div>
</div>

3. Mixed Column Widths

You can mix and match column sizes for creative layouts.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-md-3" style="background-color: lightblue;">25%</div>
        <div class="col-md-6" style="background-color: lightgreen;">50%</div>
        <div class="col-md-3" style="background-color: lightcoral;">25%</div>
    </div>
</div>

4. Nested Grid System

Use nested grids to create more complex layouts within a column.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-md-6" style="background-color: lightblue;">
            Parent Column
            <div class="row">
                <div class="col-md-6" style="background-color: lightyellow;">Nested 1</div>
                <div class="col-md-6" style="background-color: lightgray;">Nested 2</div>
            </div>
        </div>
        <div class="col-md-6" style="background-color: lightgreen;">Parent Column 2</div>
    </div>
</div>

5. Offset Columns

Add space to the left of a column using .col-*-offset-* classes.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="background-color: lightgray;">Centered Column</div>
    </div>
</div>

6. Grid for Small Devices

Use .col-sm-* classes to define layouts for tablets and small laptops (≥768px and <992px).

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-sm-6" style="background-color: lightblue;">50% Width</div>
        <div class="col-sm-6" style="background-color: lightgreen;">50% Width</div>
    </div>
</div>

7. Grid for Large Devices

Use .col-lg-* classes for widescreen desktops (≥1200px).

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: lightblue;">Column 1</div>
        <div class="col-lg-4" style="background-color: lightgreen;">Column 2</div>
        <div class="col-lg-4" style="background-color: lightcoral;">Column 3</div>
    </div>
</div>

8. Responsive Grid

Combine multiple breakpoints to create layouts that adapt to all devices.

HTML Example:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color: lightblue;">Column 1</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color: lightgreen;">Column 2</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color: lightcoral;">Column 3</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color: lightyellow;">Column 4</div>
    </div>
</div>

9. Equal Height Columns

Use the .row class with display: flex for equal-height columns.

HTML Example:

<div class="container">
    <div class="row" style="display: flex;">
        <div class="col-md-4" style="background-color: lightblue; height: 100px;">Column 1</div>
        <div class="col-md-4" style="background-color: lightgreen; height: 100px;">Column 2</div>
        <div class="col-md-4" style="background-color: lightcoral; height: 100px;">Column 3</div>
    </div>
</div>

10. Fluid Grid

Use .container-fluid for full-width grids.

HTML Example:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4" style="background-color: lightblue;">Column 1</div>
        <div class="col-md-4" style="background-color: lightgreen;">Column 2</div>
        <div class="col-md-4" style="background-color: lightcoral;">Column 3</div>
    </div>
</div>

Key Takeaways

  1. Master the 12-Column Grid:
    • All columns should add up to 12 in a row.
  2. Responsive Design:
    • Combine classes like .col-xs-*, .col-sm-*, .col-md-*, and .col-lg-* to ensure layouts work on all devices.
  3. Test Layouts:
    • Use browser developer tools to simulate different screen sizes.

Conclusion

Bootstrap’s grid system is incredibly flexible and powerful, making it a must-know tool for web developers. By practicing these examples, you’ll gain the confidence to create complex, responsive layouts for any project.

Leave a Comment