Bootstrap Grid System
Introduction to Bootstrap Grid
Bootstrap's grid system is a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12-column layout and includes predefined classes for creating flexible, responsive layouts.
- Responsive: automatically adjusts to screen size
- Mobile-first: designed for mobile devices first, then scales up
- Based on flexbox: provides better control over alignment and ordering
- 12-column system: allows for various layout combinations
- Six responsive breakpoints: xs, sm, md, lg, xl, and xxl
- Supports nesting: columns can contain other rows and columns
Grid Containers
Bootstrap requires a containing element to wrap site contents and house the grid system. You can use one of two container classes:
1. Fixed-width Container
The .container class provides a responsive fixed-width container with maximum widths at each breakpoint:
<div class="container">
<!-- Content here -->
</div>
| Breakpoint | Class | Container max-width |
|---|---|---|
| Extra small (xs) | <576px | 100% |
| Small (sm) | ≥576px | 540px |
| Medium (md) | ≥768px | 720px |
| Large (lg) | ≥992px | 960px |
| Extra large (xl) | ≥1200px | 1140px |
| Extra extra large (xxl) | ≥1400px | 1320px |
2. Fluid Container
The .container-fluid class provides a full-width container that spans the entire width of the viewport:
<div class="container-fluid">
<!-- Content here -->
</div>
3. Responsive Containers
Responsive containers allow you to specify a container that is 100% wide until a specific breakpoint is reached:
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Grid Rows and Columns
Basic Grid Structure
The grid system uses a series of containers, rows, and columns to layout and align content:
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Example:
Equal-Width Columns
Using the .col class creates equal-width columns:
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
Example:
Responsive Grid Classes
Bootstrap's grid includes six tiers of predefined classes for building responsive layouts:
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
<div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
<div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
<div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
</div>
Example:
Grid Classes Breakdown
| Class | Description |
|---|---|
.col- |
Extra small devices (portrait phones, less than 576px) |
.col-sm- |
Small devices (landscape phones, 576px and up) |
.col-md- |
Medium devices (tablets, 768px and up) |
.col-lg- |
Large devices (desktops, 992px and up) |
.col-xl- |
Extra large devices (large desktops, 1200px and up) |
.col-xxl- |
Extra extra large devices (larger desktops, 1400px and up) |
Column Sizing
1. Specific Column Widths
Use .col-* classes to specify how many columns a column should span:
<div class="row">
<div class="col-4">4 columns</div>
<div class="col-8">8 columns</div>
</div>
Example:
2. Auto-Layout Columns
Use .col for equal-width columns and .col-auto for columns that size based on content:
<div class="row">
<div class="col">Equal width</div>
<div class="col">Equal width</div>
<div class="col-auto">Variable width content</div>
</div>
Example:
Column Ordering
1. Order Classes
Use .order-* classes to control the visual order of columns:
<div class="row">
<div class="col order-3">First in DOM, displayed third</div>
<div class="col order-2">Second in DOM, displayed second</div>
<div class="col order-1">Third in DOM, displayed first</div>
</div>
Example:
2. Responsive Ordering
Use responsive order classes to change the order at different breakpoints:
<div class="row">
<div class="col order-2 order-md-1">First on md and up, second on smaller screens</div>
<div class="col order-1 order-md-2">Second on md and up, first on smaller screens</div>
</div>
Offsetting Columns
Use .offset-* classes to offset columns to the right:
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4 offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">col-md-3 offset-md-3</div>
<div class="col-md-3 offset-md-3">col-md-3 offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">col-md-6 offset-md-3</div>
</div>
Example:
Responsive Offsets
Offsets can be responsive too:
<div class="row">
<div class="col-sm-5 col-md-6">col-sm-5 col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5 offset-sm-2 col-md-6 offset-md-0</div>
</div>
Nesting
You can nest rows and columns inside columns:
<div class="row">
<div class="col-sm-9">
Level 1: col-sm-9
<div class="row">
<div class="col-8 col-sm-6">Level 2: col-8 col-sm-6</div>
<div class="col-4 col-sm-6">Level 2: col-4 col-sm-6</div>
</div>
</div>
</div>
Example:
Gutters
Gutters are the padding between columns. Bootstrap 5 provides gutter classes to control spacing:
1. Default Gutters
By default, Bootstrap adds horizontal gutters of 1.5rem (24px) on each side of columns:
<div class="row">
<div class="col-md-6">Default gutter</div>
<div class="col-md-6">Default gutter</div>
</div>
2. Gutter Classes
Use .g-*, .gx-*, and .gy-* classes to control gutters:
<!-- No gutters -->
<div class="row g-0">
<div class="col-6">No gutter</div>
<div class="col-6">No gutter</div>
</div>
<!-- Larger gutters -->
<div class="row g-5">
<div class="col-6">Larger gutter</div>
<div class="col-6">Larger gutter</div>
</div>
<!-- Horizontal gutters only -->
<div class="row gx-5">
<div class="col-6">Horizontal gutter</div>
<div class="col-6">Horizontal gutter</div>
</div>
<!-- Vertical gutters only -->
<div class="row gy-5">
<div class="col-6">Vertical gutter</div>
<div class="col-6">Vertical gutter</div>
</div>
Row Columns
Use .row-cols-* classes to quickly set the number of columns:
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
Example:
Responsive Row Columns
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
Example:
Best Practices
- Always use rows inside containers
- Place columns only inside rows
- Specify column widths that add up to 12 for each row
- Use responsive classes to adapt layouts to different screen sizes
- Use nesting for complex layouts
- Use the grid system in combination with flexbox utilities for more control
- Test your layouts across different screen sizes