Tutorials Bootstrap 5 Tutorial
Grid System Overview
Grid System Overview: free step-by-step lesson with examples, common mistakes, and interview tips — part of Bootstrap 5 Tutorial on Toolliyo Academy.
On this page
Bootstrap 5 Tutorial · Lesson 6 of 100
Grid System Overview
Setup & Utilities → Components & Forms → Theme & Integrate → Ship & Projects
Setup & Utilities · 1 — Layout · ~6 min · Setup and Grid
What is this?
The grid is a 12-column layout: .container > .row > .col-* (and breakpoint variants like .col-md-6).
Why should you care?
Dashboards and marketing pages need predictable columns that stack on mobile.
See it live — copy this example
Examples include Bootstrap 5.3 CDN links. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>BootVerse</title>
</head>
<body class="p-3">
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-8"><div class="p-3 bg-primary-subtle">Main</div></div>
<div class="col-12 col-md-4"><div class="p-3 bg-secondary-subtle">Side</div></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Columns share a row.
- Breakpoint prefixes change width from that width up.
- g-* sets gutters.
Practice next
- Build a two-column layout.
- Resize the browser past md.
- Try col-md-4 / col-md-8 swap.
- Nest a row inside a column.
- Use .container-fluid for full bleed.
Remember
12 columns total. Mobile-first col-* then col-md-*. Use gutters with g-*.
Page skeleton
BootVerse needs main + sidebar.
Outcome: Layout stacks on phone, side-by-side on desktop.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!