Bootstrap 4 Grid System

Welcome to The Coding College! Bootstrap 4’s grid system is one of its core features, providing a powerful, responsive layout system. It uses a 12-column layout with flexibility to adjust for different screen sizes.

In this guide, you’ll learn how to use the Bootstrap 4 grid system to build dynamic and responsive web designs efficiently.

What is the Bootstrap Grid System?

The grid system in Bootstrap 4 is a flexbox-based layout system that divides the webpage into rows and columns. It allows you to:

• Create layouts with multiple rows and columns.
• Ensure responsiveness across devices.
• Align and distribute content effectively.

Basic Structure

A Bootstrap grid layout consists of:

1. Container: A wrapper for rows and columns.
2. Rows: Horizontal groups of columns.
3. Columns: Vertical sections within a row.

Here’s the basic syntax:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Containers

The grid system requires a container to ensure proper alignment and spacing. Bootstrap 4 provides two types of containers:

1. Fixed-Width Container

The .container class creates a fixed-width container that adjusts its width based on the screen size.

<div class="container">
  This is a fixed-width container.
</div>

2. Fluid Container

The .container-fluid class creates a full-width container that spans the entire width of the viewport.

<div class="container-fluid">
  This is a full-width container.
</div>

Rows

The .row class creates a horizontal row, which is used to group columns.

Example: Adding Rows

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Columns

Columns are defined using classes like .col, .col-sm-*, .col-md-*, .col-lg-*, and .col-xl-*. These classes specify how the columns behave on different screen sizes.

Example: Basic Columns

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Each column takes up an equal width within the row by default.

Column Breakpoints

Bootstrap 4 uses 5 breakpoints to define how columns behave on different screen sizes:

Example: Responsive Columns

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

Explanation:

• On extra small screens (<576px), all columns take up the full width (col-12).
• On medium screens (≥768px), each column takes half the width (col-md-6).
• On large screens (≥992px), the first two columns take one-third of the width (col-lg-4), and the last column takes the full width.

Column Spacing

Bootstrap 4 automatically includes gutter space between columns. You can customize this spacing:

1. Removing Gutter Space

Use the .no-gutters class on the row to remove all spacing between columns:

<div class="row no-gutters">
  <div class="col">No gutter</div>
  <div class="col">No gutter</div>
</div>

2. Adjusting Padding

You can use Bootstrap’s spacing utilities to adjust the spacing between columns.

<div class="row">
  <div class="col px-5">Column 1</div>
  <div class="col px-5">Column 2</div>
</div>

Nested Columns

You can nest rows and columns within a column to create more complex layouts.

Example: Nested Grid

<div class="container">
  <div class="row">
    <div class="col">
      Parent Column
      <div class="row">
        <div class="col">Child Column 1</div>
        <div class="col">Child Column 2</div>
      </div>
    </div>
  </div>
</div>

Offset Columns

Use .offset-* classes to add space before a column:

<div class="container">
  <div class="row">
    <div class="col-md-4 offset-md-4">Centered Column</div>
  </div>
</div>

Column Order

Use .order-* classes to control the order of columns.

Example: Changing Column Order

<div class="container">
  <div class="row">
    <div class="col order-3">Third</div>
    <div class="col order-1">First</div>
    <div class="col order-2">Second</div>
  </div>
</div>

Advanced Grid System Features

Equal Height Columns

Bootstrap 4’s grid system uses flexbox, so columns are automatically of equal height.

Aligning Content

Use align-items-* and justify-content-* classes to align content:

<div class="row align-items-center justify-content-center">
  <div class="col-4">Centered Column</div>
</div>

Responsive Utilities

Bootstrap provides utilities like d-none, d-sm-block, and d-lg-none to control the visibility of grid elements based on screen size.

Conclusion

The Bootstrap 4 Grid System is a versatile and powerful tool for creating responsive layouts. By mastering its rows, columns, and breakpoints, you can build designs that look great on any device.