How to create 12 column grid in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a 12 Column Grid in Bootstrap Easily

In Bootstrap, you create a 12 column grid by using the container, row, and col classes. Each row can have up to 12 columns combined, and you assign column widths using classes like col-4 for 4 columns wide. This system automatically adjusts for different screen sizes.

📐

Syntax

Bootstrap's grid system uses three main parts:

container: Wraps the grid and centers content.
row: Creates a horizontal group of columns.
col-*: Defines the width of each column out of 12.

You combine these classes to build your layout. For example, col-6 means the column takes 6 out of 12 parts (half the row).

html

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

Output

A container with one row containing two columns: the first column is one-third width, the second is two-thirds width.

💻

Example

This example shows a full 12 column grid split into three equal columns using col-4. Each column takes 4 parts out of 12, so three columns fit perfectly in one row.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 12 Column 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-3">
    <div class="row">
      <div class="col-4 bg-primary text-white p-3">Column 1</div>
      <div class="col-4 bg-success text-white p-3">Column 2</div>
      <div class="col-4 bg-warning text-dark p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

A webpage with a horizontal row of three colored boxes, each equally wide, filling the row.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap's 12 column grid include:

Adding columns in a row that sum to more than 12, causing columns to wrap unexpectedly.
Not using a row container, which breaks the grid layout.
Forgetting to include the Bootstrap CSS file, so grid classes have no effect.
Using fixed widths instead of responsive classes like col-md-6 for different screen sizes.

html

<!-- Wrong: columns sum to more than 12 -->
<div class="container">
  <div class="row">
    <div class="col-8">Column 1</div>
    <div class="col-6">Column 2</div> <!-- 8 + 6 = 14 > 12 -->
  </div>
</div>

<!-- Right: columns sum to 12 -->
<div class="container">
  <div class="row">
    <div class="col-8">Column 1</div>
    <div class="col-4">Column 2</div>
  </div>
</div>

Output

The first example causes the second column to wrap to a new line; the second example keeps both columns on the same row.

📊

Quick Reference

Class	Meaning	Columns Taken
container	Centers and pads content	N/A
row	Wraps columns horizontally	N/A
col-1	Column width 1/12	1
col-6	Column width 6/12 (half)	6
col-12	Full width column	12
col-md-4	Width 4/12 on medium+ screens	4

✅

Key Takeaways

Bootstrap grid divides each row into 12 equal parts for flexible layouts.

Use container, row, and col-* classes to build grids.

Ensure column widths in a row add up to 12 or less to avoid wrapping.

Include Bootstrap CSS for grid classes to work properly.

Use responsive classes like col-md-* for layouts that adapt to screen size.