BootstrapHow-ToBeginner · 4 min read

How to Use Grid System in Bootstrap: Simple Guide

Use the Bootstrap container to wrap your content, then create row elements to hold col classes that define columns. The grid uses a 12-column system where you assign column widths like col-6 for half width, making layouts responsive and easy to manage.

📐

Syntax

The Bootstrap grid system uses a combination of container, row, and col classes. Container centers your content and adds padding. Row groups columns horizontally. Col defines the width of each column out of 12 parts.

You can specify column sizes for different screen sizes using prefixes like col-sm-, col-md-, col-lg-, and col-xl-.

html

<div class="container">
  <div class="row">
    <div class="col-6">Half width column</div>
    <div class="col-6">Half width column</div>
  </div>
</div>

Output

Two equal columns side by side, each taking half the container width.

💻

Example

This example shows a responsive layout with three columns that stack on small screens and sit side by side on medium and larger screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12 col-md-4 bg-primary text-white p-3">Column 1</div>
      <div class="col-12 col-md-4 bg-secondary text-white p-3">Column 2</div>
      <div class="col-12 col-md-4 bg-success text-white p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

On small screens, columns stack vertically; on medium and larger screens, three colored columns appear side by side equally spaced.

⚠️

Common Pitfalls

Not using a row inside a container: Columns must be inside a row to align properly.

Forgetting the 12-column total: Column widths in a row should add up to 12 or less to avoid wrapping.

Not using responsive prefixes: Without prefixes like col-md-, columns won’t adjust on different screen sizes.

html

<!-- Wrong: Missing row -->
<div class="container">
  <div class="col-6">Half width</div>
  <div class="col-6">Half width</div>
</div>

<!-- Right: With row -->
<div class="container">
  <div class="row">
    <div class="col-6">Half width</div>
    <div class="col-6">Half width</div>
  </div>
</div>

Output

Wrong example shows columns stacking incorrectly; right example shows two columns side by side correctly.

📊

Quick Reference

Class	Description
container	Centers content with padding
row	Wraps columns horizontally
col	Auto width column
col-6	Column takes 6 of 12 parts (50%)
col-sm-4	Column takes 4 parts on small screens and up
col-md-3	Column takes 3 parts on medium screens and up
col-lg-12	Full width column on large screens
col-xl-auto	Column width adjusts to content on extra large screens

✅

Key Takeaways

Always wrap columns inside a row within a container for proper alignment.

Bootstrap grid divides the row into 12 parts; column widths should add up to 12 or less.

Use responsive prefixes like col-sm- and col-md- to make layouts adapt to screen sizes.

Columns stack vertically on smaller screens if you use responsive classes correctly.

The grid system helps create clean, responsive layouts without custom CSS.