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 Prefix	Breakpoint	Example	Width
`col-`	Extra small (xs) <576px	`col-6`	6/12 = 50% width
`col-sm-`	Small (sm) ≥576px	`col-sm-4`	4/12 = 33.33% width
`col-md-`	Medium (md) ≥768px	`col-md-3`	3/12 = 25% width
`col-lg-`	Large (lg) ≥992px	`col-lg-2`	2/12 = 16.66% width
`col-xl-`	X-Large (xl) ≥1200px	`col-xl-1`	1/12 = 8.33% width
`col-xxl-`	XX-Large (xxl) ≥1400px	`col-xxl-1`	1/12 = 8.33% width

Grid Examples

Example 1: Equal Width Columns

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 Size	Class Applied	Columns per Row	Visual
Mobile (xs) <576px	`col-12`	1 column	📱 (Stacked)
Small (sm) ≥576px	`col-sm-6`	2 columns	📱📱 (2 per row)
Medium (md) ≥768px	`col-md-4`	3 columns	💻💻💻 (3 per row)
Large (lg) ≥992px	`col-lg-3`	4 columns	🖥️🖥️🖥️🖥️ (4 per row)
X-Large (xl) ≥1200px	`col-xl-2`	6 columns	🖥️🖥️🖥️🖥️🖥️🖥️ (6 per row)

Row and Column Features

Gutters (Gaps)

Horizontal and vertical spacing between columns.

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

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial