Bootstrap 5 Tutorial

Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction
→

Bootstrap 5 Grid System

Grid System: Bootstrap's grid system uses containers, rows, and columns to layout and align content.

How the Grid Works

📦
Containers

Provide a means to center your site's contents.

.container
📐
Rows

Horizontal groups of columns that ensure columns line up properly.

.row
📊
Columns

Content goes inside columns. Bootstrap uses a 12-column system.

.col-*

Basic Grid Structure

Simple Grid Example
Column 1
Column 2
Column 3
Basic Grid Code
<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1 (33%)</div>
    <div class="col-md-4">Column 2 (33%)</div>
    <div class="col-md-4">Column 3 (33%)</div>
  </div>
</div>
12-Column System: Bootstrap's grid divides each row into 12 equal columns. You specify how many columns each element should span.

Grid Columns Explained

Column Classes Breakdown
Class PrefixBreakpointExampleWidth
col-Extra small (xs)
<576px		col-66/12 = 50% width
col-sm-Small (sm)
≥576px		col-sm-44/12 = 33.33% width
col-md-Medium (md)
≥768px		col-md-33/12 = 25% width
col-lg-Large (lg)
≥992px		col-lg-22/12 = 16.66% width
col-xl-X-Large (xl)
≥1200px		col-xl-11/12 = 8.33% width
col-xxl-XX-Large (xxl)
≥1400px		col-xxl-11/12 = 8.33% width

Grid Examples

Example 1: Equal Width Columns
Equal width
Equal width
Equal width
<div class="row">
            <div class="col">Equal width</div>
            <div class="col">Equal width</div>
            <div class="col">Equal width</div>
            </div>
Using .col without a number automatically sizes columns to equal width.
Example 2: Specified Column Widths
8 columns
4 columns
<div class="row">
            <div class="col-8">8 columns (66.66%)</div>
            <div class="col-4">4 columns (33.33%)</div>
            </div>
Example 3: Responsive Columns
Full width on mobile, 8 cols on desktop
Full width on mobile, 4 cols on desktop
<div class="row">
            <div class="col-12 col-md-8">
                Full mobile, 8-col desktop
            </div>
            <div class="col-12 col-md-4">
                Full mobile, 4-col desktop
            </div>
            </div>

Grid Breakpoints in Action

Responsive Grid Behavior
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="row">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Item</div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Item</div>
            <!-- More items -->
            </div>
Screen SizeClass AppliedColumns per RowVisual
Mobile (xs)
<576px		col-121 column📱 (Stacked)
Small (sm)
≥576px		col-sm-62 columns📱📱 (2 per row)
Medium (md)
≥768px		col-md-43 columns💻💻💻 (3 per row)
Large (lg)
≥992px		col-lg-34 columns🖥️🖥️🖥️🖥️ (4 per row)
X-Large (xl)
≥1200px		col-xl-26 columns🖥️🖥️🖥️🖥️🖥️🖥️ (6 per row)

Row and Column Features

Gutters (Gaps)

Horizontal and vertical spacing between columns.

With gutter
With gutter
Gutter Classes:
  • g-0 - No gutters
  • g-1 to g-5 - Gutter sizes
  • gy-* - Vertical gutters only
  • gx-* - Horizontal gutters only
Vertical Alignment

Align columns vertically within a row.

Vertically centered
Alignment Classes:
  • align-items-start
  • align-items-center
  • align-items-end
  • align-self-* (for individual columns)
Horizontal Alignment

Align columns horizontally within a row.

Centered column
Justify Classes:
  • justify-content-start
  • justify-content-center
  • justify-content-end
  • justify-content-between
  • justify-content-around
Column Wrapping

Columns will wrap to the next line when they don't fit.

Column 1 (9)
Column 2 (4 - wraps)

9 + 4 = 13 columns, so the second column wraps to the next line.

Grid Offset and Ordering

Offset Columns

Move columns to the right by adding offset classes.

Centered column
<div class="row">
            <div class="col-md-4 offset-md-4">
                <!-- This column will be centered -->
            </div>
            </div>

Offset classes: offset-*, offset-sm-*, offset-md-*, etc.

Column Ordering

Change visual order without changing HTML structure.

First in HTML, second visually
Second in HTML, first visually
<div class="row">
            <div class="col order-2">Appears second</div>
            <div class="col order-1">Appears first</div>
            </div>

Practical Grid Layouts

Common Layout Patterns
1. Sidebar Layout
Sidebar

Navigation menu

Main Content

Primary content area

2. Card Grid
Card 1

Card content

Card 2

Card content

Card 3

Card content

3. Hero Section

Hero Title

Hero description text

Hero Image/Illustration

Grid Best Practices

Tips for Effective Grid Usage
  • Always wrap columns in a .row
  • Rows should be placed inside a .container or .container-fluid
  • Use responsive breakpoints for mobile-first design
  • Keep total column units ≤ 12 per row
  • Use g-* classes for consistent spacing
  • Test your grid on different screen sizes
  • Use utility classes for alignment and spacing
Common Grid Mistakes
  • ❌ Forgetting the .row wrapper
  • ❌ Using columns outside of containers
  • ❌ Not considering mobile breakpoints
  • ❌ Overusing nested grids unnecessarily
  • ❌ Ignoring column wrapping behavior
NextIntroduction
→

Explore Related Tools

Hand-picked utilities and calculators related to this tool.

Related Tools
Bootstrap 5 Layout System: Containers, Breakpoints, and Widths
→
Related Tools
Bootstrap 5 Column Sizes: Grid System, Auto & Fixed Columns
→
Related Tools
{meta.title}
→
Related Tools
Fuzzy Logic Systems Tutorial: Mathematical Sets, Inference &amp; Control
→
Related Tools
Bootstrap 5 Auto Layout: Grid Columns & Responsive Sizing Guide
→
Related Tools
Bootstrap 5 Breakpoints: Responsive Grid & Media Query Guide
→
Related Tools