Mastering Bootstrap: The Ultimate Guide to Building Responsive Websites Faster

Chapter 3: Bootstrap Grid System & Layout

🧠 Why This Chapter Matters

A well-structured layout is the backbone of any responsive website, and Bootstrap’s grid system makes this process both easy and flexible. Based on a 12-column layout, Bootstrap’s grid enables you to build layouts that automatically adjust across different devices — no complex media queries needed.

This chapter will guide you through how the grid works, how to use rows and columns, and how to handle spacing, alignment, responsiveness, and nesting using Bootstrap 5.

✅ 1. What is the Bootstrap Grid System?

The Bootstrap grid system uses a 12-column flexible layout with predefined classes for small to extra-large screens.

✅ Grid system is built using Flexbox, so it’s naturally responsive.

✅ 2. Container Basics

Containers wrap your grid content. Bootstrap offers two types:

<div class="container">Fixed width</div>

<div class="container-fluid">Full width</div>

✅ 3. Understanding Rows and Columns

Every grid starts with a .row and contains one or more .col-* columns.

🔹 Example:

<div class="container">

  <div class="row">

    <div class="col">Column 1</div>

    <div class="col">Column 2</div>

  </div>

</div>

✅ Automatically splits available space between columns.

✅ 4. Grid Breakpoints

Bootstrap allows different layouts at different screen sizes using responsive classes:

🔹 Responsive Example:

<div class="row">

  <div class="col-sm-6 col-lg-3">Responsive Column</div>

</div>

✅ Adapts layout based on screen size automatically.

✅ 5. Specifying Column Widths

You can assign specific widths using .col-1 to .col-12.

<div class="col-4">Takes 4 columns</div>

<div class="col-8">Takes 8 columns</div>

✅ Columns must always add up to 12 per row for full width.

✅ 6. Nesting Columns

You can place a new .row inside a column to nest grids:

<div class="row">

  <div class="col-6">

    Parent Column

    <div class="row">

      <div class="col">Nested 1</div>

      <div class="col">Nested 2</div>

    </div>

  </div>

</div>

✅ Useful for creating complex layouts inside sections.

✅ 7. Column Alignment and Spacing

Use Bootstrap utility classes for alignment:

🔹 Vertical Alignment

<div class="row align-items-center">

  <div class="col">Top</div>

  <div class="col">Middle</div>

</div>

🔹 Horizontal Alignment

<div class="row justify-content-between">

  <div class="col-4">Left</div>

  <div class="col-4">Right</div>

</div>

✅ 8. Offsets and Gaps

Use offset classes to create space between columns:

<div class="col-4 offset-2">Pushed Right</div>

Use gutters and spacing utilities for fine control:

<div class="row g-3">Gap of 3 between columns</div>

✅ Improves layout without writing custom CSS.

✅ 9. Grid Utilities Table

✅ 10. Complete Layout Example

<div class="container mt-5">

  <div class="row">

    <div class="col-12 col-md-6 bg-primary text-white p-3">

      Left Column

    </div>

    <div class="col-12 col-md-6 bg-secondary text-white p-3">

      Right Column

    </div>

  </div>

</div>

✅ On mobile, columns stack. On medium screens (≥768px), columns appear side by side.