Bootstrap Grid System

40 min

Bootstrap's grid system is the foundation of responsive layouts, using a flexible 12-column structure built on CSS Flexbox. The grid consists of three main components: containers, rows, and columns. Containers provide a fixed or fluid width and center content horizontally. Rows create horizontal groups of columns and use negative margins to align columns properly. Columns are the actual content areas that span a certain number of the 12 available columns.

The grid system uses a mobile-first approach, meaning styles are designed for small screens first, then enhanced for larger screens using breakpoints. Bootstrap defines six breakpoints: xs (extra small, default), sm (small, ≥576px), md (medium, ≥768px), lg (large, ≥992px), xl (extra large, ≥1200px), and xxl (extra extra large, ≥1400px). You can specify different column widths for different breakpoints, creating truly responsive layouts that adapt to any screen size.

Column classes follow a naming pattern: `col-{breakpoint}-{number}`. For example, `col-md-6` means 'on medium screens and up, this column should take 6 out of 12 columns (50% width)'. You can combine multiple breakpoint classes on a single element to create complex responsive behaviors. The grid automatically handles column wrapping when columns exceed 12 units, moving them to the next row.

Bootstrap's grid includes powerful features like column offsetting, nesting, and alignment utilities. Offsetting allows you to push columns to the right using `offset-{breakpoint}-{number}` classes. Nesting grids enables you to place rows inside columns, creating complex layouts. Alignment utilities like `justify-content-{breakpoint}-{value}` control horizontal alignment, while `align-items-{breakpoint}-{value}` controls vertical alignment.

Understanding the grid system's gutters (spacing between columns) is crucial for consistent layouts. Bootstrap uses padding to create gutters, and you can control gutter size using the `g-{number}` utility classes on rows. The default gutter is responsive, adjusting based on screen size. You can also remove gutters entirely using `g-0` for edge-to-edge layouts.

The grid system's flexibility makes it suitable for everything from simple two-column layouts to complex dashboards with multiple sections. By mastering the grid system, you can create professional, responsive websites without writing custom CSS. The grid handles all the complex calculations and media queries automatically, saving you significant development time.

Key Concepts

Bootstrap grid uses containers, rows, and columns for layout.
The grid is based on a 12-column system using Flexbox.
Mobile-first approach with six responsive breakpoints.
Column classes follow the pattern: col-{breakpoint}-{number}.
Grid supports offsetting, nesting, and alignment utilities.

Learning Objectives

Master

Creating responsive layouts with Bootstrap grid
Using breakpoints to control column widths
Understanding container, row, and column relationships
Combining multiple breakpoint classes for complex layouts

Develop

Mobile-first responsive design thinking
Understanding Flexbox-based layout systems
Planning layouts for different screen sizes

Tips

Always wrap columns in a row: <div class="row">...</div>.
Use col-12 for full-width columns on mobile, then add larger breakpoint classes.
Remember: columns must add up to 12 within a row (or they'll wrap).
Use container-fluid for full-width layouts, container for fixed-width centered layouts.

Common Pitfalls

Forgetting to wrap columns in a row, breaking the layout.
Using col-{number} without breakpoint, which only works on extra small screens.
Not understanding that columns wrap when they exceed 12 units.
Mixing container types incorrectly, causing layout issues.

Summary

Bootstrap grid uses a 12-column system with containers, rows, and columns.
Mobile-first breakpoints enable responsive layouts.
Column classes control width at different screen sizes.
Grid supports advanced features like offsetting and nesting.

Exercise

Create a responsive grid layout with different column sizes for different screen sizes.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Column 1</h5>
          <p class="card-text">This column takes full width on mobile, half width on medium screens, and one-third on large screens.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Column 2</h5>
          <p class="card-text">Same responsive behavior as the first column.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Column 3</h5>
          <p class="card-text">This column takes full width on mobile and medium screens, one-third on large screens.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Exercise Tips

Try removing col-12 to see how columns behave without explicit mobile sizing.
Experiment with different breakpoint combinations: col-sm-6 col-md-4 col-lg-3.
Add gutters using g-3 or g-4 classes on the row for spacing.
Use offset classes to center columns: col-md-6 offset-md-3.

Bootstrap Grid System