Bootstrap Grid System — Containers, Rows, and Columns

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

Bootstrap's grid system is a 12-column layout system that uses containers, rows, and columns to create responsive page structures that adapt to different screen sizes.

What You'll Learn

You will learn how the 12-column grid system works, how to use containers for proper alignment, how to create rows and columns, and how columns automatically distribute space.

Why It Matters

The grid is the foundation of every Bootstrap layout. DodaTech's websites rely on the grid to maintain consistent spacing and alignment across all pages and devices.

Real-World Use

Doda Browser's extension gallery uses a Bootstrap grid to display extension cards in a responsive layout: 4 columns on desktop, 2 on tablet, and 1 on mobile.

flowchart LR
    A[Installation] --> B[Grid System]
    B --> C[Containers]
    B --> D[Rows]
    B --> E[Columns]
    C --> F[Responsive Layout]
    D --> F
    E --> F
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

The 12-Column System

Bootstrap divides each row into 12 equal columns. You choose how many columns each element spans. The total should equal 12 for a full row.

<div class="container">
  <div class="row">
    <div class="col-4">Column 1 (4/12)</div>
    <div class="col-4">Column 2 (4/12)</div>
    <div class="col-4">Column 3 (4/12)</div>
  </div>
</div>

Expected output: Three equal-width columns side by side, each taking 4 of 12 grid columns.

The number inside col-* represents how many columns out of 12 the element spans. col-6 means half the row, col-3 means one quarter.

Containers

Containers are the outermost wrapper that centers content and provides responsive horizontal padding.

<div class="container">Fixed-width container (max-width changes per breakpoint)</div>
<div class="container-fluid">Fluid container (full width, always 100%)</div>
<div class="container-sm">Container that is 100% wide until the sm breakpoint</div>

Expected output: Three containers with different width behaviors. The fixed container has a max-width, the fluid container spans the full viewport, and the breakpoint-specific container is fluid below its threshold.

Container types:

• .container — max-width changes at each breakpoint
• .container-fluid — always width: 100%
• .container-{sm|md|lg|xl|xxl} — full width until the specified breakpoint

Rows

Rows are wrappers for columns. They create horizontal groups and clear floated columns. Rows have negative margins that offset column padding, preventing unwanted spacing at the edges.

<div class="container">
  <div class="row">
    <div class="col">Auto-column</div>
    <div class="col">Auto-column</div>
  </div>
</div>

Expected output: Two columns that automatically split the row equally without specifying a number.

When you use .col without a number, Bootstrap automatically distributes equal widths. With 2 .col elements, each gets 6 columns. With 4 .col elements, each gets 3 columns.

Columns

Columns contain your actual content. They have horizontal padding (gutters) that create consistent spacing between columns.

<div class="container">
  <div class="row">
    <div class="col-8">Main content (8/12)</div>
    <div class="col-4">Sidebar (4/12)</div>
  </div>
</div>

Expected output: A main content area taking two-thirds of the width and a sidebar taking one-third.

Auto-Sizing Columns

Columns can auto-size based on their content using col-auto:

<div class="container">
  <div class="row">
    <div class="col">Flexible</div>
    <div class="col-auto">Auto-width based on content</div>
    <div class="col">Flexible</div>
  </div>
</div>

Expected output: The middle column is as wide as its content. The first and third columns split the remaining space equally.

Nesting Grids

You can nest rows inside columns to create more complex layouts:

<div class="container">
  <div class="row">
    <div class="col-6">
      Left column
      <div class="row mt-2">
        <div class="col-6">Nested left</div>
        <div class="col-6">Nested right</div>
      </div>
    </div>
    <div class="col-6">Right column</div>
  </div>
</div>

Expected output: A two-column row where the left column contains its own two-column nested grid.

Common Mistakes

1. Columns Outside a Row

Columns must be direct children of rows. Placing a column directly inside a container without a row will not produce the correct layout.

2. Row Outside a Container

Rows should be inside a container. Without a container, the row's negative margins can cause horizontal overflow on some screen sizes.

3. Column Numbers Adding to More Than 12

If column numbers exceed 12, the extra columns wrap to a new line. Make sure your column numbers sum to 12 or fewer per row.

4. Forgetting That Content Goes in Columns

Always place content inside columns, not directly in rows. Rows are only for organizing columns.

5. Using col- Classes Without Understanding Breakpoints

col-4 applies at all screen sizes. col-md-4 only applies at the medium breakpoint and above. Mixing them without understanding breakpoints can produce unexpected layouts.

Practice Questions

1. How many columns does Bootstrap's grid have? 12 columns per row.

2. What is the difference between .container and .container-fluid? .container has a max-width that changes at breakpoints. .container-fluid is always 100% width.

3. What happens when column numbers exceed 12? Extra columns wrap to the next line.

4. How do you create equal-width columns without specifying a number? Use the .col class without a number. Bootstrap automatically distributes equal widths.

5. What are gutters in the grid? Gutters are the padding between columns, created by horizontal padding on columns and negative margin on rows.

Challenge

Create a page layout with a header (full width), a main content area (8 columns), a sidebar (4 columns), and a footer (full width). Nest a 3-column grid inside the main content area.

FAQ

Mini Project

Build a product listing page using the Bootstrap grid. Create a row with 4 product cards using col-lg-3 col-md-6 col-12 so the layout shows 4 columns on large screens, 2 on medium, and 1 on small.

What's Next

After mastering the basic grid, explore Grid Options for alignment, ordering, and offset classes. Then learn about Columns and Gutters for precise spacing control.