Skip to content

Bootstrap Grid System Explained — Responsive Layouts

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Grid System Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap's grid system uses a 12-column layout with responsive breakpoints (xs, sm, md, lg, xl, xxl) to create flexible, mobile-first page layouts.

What You'll Learn

  • Container, row, and col classes
  • Responsive breakpoints
  • Auto-layout columns
  • Column offsets and ordering
  • Gutters and nested grids

Why It Matters

The grid system is the foundation of Bootstrap layouts. Understanding breakpoints and column classes enables complex responsive designs without media queries.

<div class="container">
  <!-- Equal-width columns -->
  <div class="row mb-3">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>

  <!-- Responsive: stacked on mobile, side-by-side on desktop -->
  <div class="row mb-3">
    <div class="col-12 col-md-8">Main content (8 columns on desktop)</div>
    <div class="col-12 col-md-4">Sidebar (4 columns on desktop)</div>
  </div>

  <!-- Offset and order -->
  <div class="row mb-3">
    <div class="col-md-4 offset-md-2">Offset by 2</div>
    <div class="col-md-4 order-first">Ordered first on mobile</div>
  </div>

  <!-- Auto-layout with gutters -->
  <div class="row g-3">
    <div class="col-6 col-md-3">
      <div class="p-3 border bg-light">Gutter 3</div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 border bg-light">Gutter 3</div>
    </div>
  </div>
</div>

Expected output: A responsive grid with equal and varied columns, offsets, ordering, and gutter spacing that adjusts at breakpoints.

← Previous Bootstrap Introduction — CSS Framework for Responsive Design Next → Bootstrap Typography Explained — Text and Headings

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap