Bootstrap Grid System

The Bootstrap Grid System is a cornerstone of Bootstrap’s responsive design framework. It allows developers to create fluid, responsive layouts by dividing a page into a 12-column system. Whether you’re building a simple website or a complex application, the grid system helps ensure your content looks great on any screen size.

In this guide from TheCodingCollege.com, you’ll learn how to use the grid system effectively, from the basics to advanced techniques.

Key Features of the Bootstrap Grid System

  1. 12-Column Layout: Every row in the grid is divided into 12 equal columns, making it flexible for any design.
  2. Responsive Design: Automatically adjusts based on the screen size (mobile, tablet, desktop).
  3. Breakpoints: Predefined classes like .col-xs-*, .col-sm-*, .col-md-*, and .col-lg-* adapt to different screen widths.
  4. Nested Grids: Grids can be nested to create complex layouts.
  5. Offsetting Columns: Add spacing between columns using offset classes.

How the Bootstrap Grid System Works

At its core, the grid system works by combining three main elements:

  1. Container: Encapsulates the grid system. Options:
    • .container (fixed-width)
    • .container-fluid (full-width)
  2. Rows: Define horizontal groups of columns using .row.
  3. Columns: Specify column width using .col-* classes.

Basic Bootstrap Grid Example

Here’s a simple example of the grid system in action:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Grid System Example</h1>
        <div class="row">
            <div class="col-sm-4" style="background-color: lightblue;">Column 1</div>
            <div class="col-sm-4" style="background-color: lightgreen;">Column 2</div>
            <div class="col-sm-4" style="background-color: lightcoral;">Column 3</div>
        </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

Result:

  • Three equally sized columns on small (tablet) screens and larger.
  • Columns stack vertically on smaller devices.

Responsive Breakpoints

Bootstrap provides classes for different screen sizes. Each class applies to a specific viewport width:

Class PrefixScreen SizeExample
.col-xs-*Extra small (<768px)Phones
.col-sm-*Small (≥768px)Tablets
.col-md-*Medium (≥992px)Desktops
.col-lg-*Large (≥1200px)Large Screens

Example:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Responsive Column</div>
</div>
  • Extra Small: Full width (12 columns).
  • Small: Half width (6 columns).
  • Medium: One-third width (4 columns).
  • Large: One-fourth width (3 columns).

Offsetting Columns

Add space between columns by using offset classes, like .col-sm-offset-*.

Example:

<div class="row">
    <div class="col-sm-4 col-sm-offset-4" style="background-color: lightgray;">Centered Column</div>
</div>
  • This creates a column that’s centered in the row by offsetting 4 columns on the left.

Nested Grids

Grids can be nested within other grids to create more complex layouts.

Example:

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6" style="background-color: lightpink;">Nested 1</div>
            <div class="col-xs-6" style="background-color: lightyellow;">Nested 2</div>
        </div>
    </div>
    <div class="col-sm-6" style="background-color: lightblue;">Main Column</div>
</div>

Equal Height Columns

By default, columns in a row might not always have equal height. To fix this, use Flexbox with the .d-flex class (in newer versions of Bootstrap) or CSS for older versions.

Example:

<div class="row" style="display: flex;">
    <div class="col-sm-6" style="background-color: lightcoral; height: 100%;">Equal Height 1</div>
    <div class="col-sm-6" style="background-color: lightgreen; height: 100%;">Equal Height 2</div>
</div>

Advanced Grid Techniques

1. Custom Column Widths

You can combine different column widths in a single row:

<div class="row">
    <div class="col-sm-3">25% Width</div>
    <div class="col-sm-6">50% Width</div>
    <div class="col-sm-3">25% Width</div>
</div>

2. Hidden and Visible Columns

Use .hidden-* or .visible-* classes to hide/show columns on specific devices.

<div class="col-sm-4 hidden-xs">Visible on Small and Larger</div>
<div class="col-xs-12 visible-xs">Visible on Extra Small</div>

3. Using Fluid Containers

For full-width layouts, replace .container with .container-fluid:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">Full-Width Column</div>
        <div class="col-sm-8">Full-Width Column</div>
    </div>
</div>

Best Practices for Bootstrap Grid System

  1. Use Rows Correctly: Always wrap columns in a .row class to maintain proper alignment.
  2. Plan for Mobile First: Start with .col-xs-* and scale up.
  3. Test Responsiveness: Check your grid on various screen sizes to ensure proper behavior.
  4. Avoid Fixed Heights: Use flexible heights or adjust using CSS media queries.
  5. Optimize Performance: Limit unnecessary nesting to keep the DOM structure clean.

Conclusion

The Bootstrap Grid System is an indispensable tool for creating responsive layouts. Whether you’re building simple web pages or complex UIs, mastering the grid system ensures your designs look polished across all devices.

Leave a Comment