How to create three column layout bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Three Column Layout in Bootstrap Easily

To create a three column layout in Bootstrap, use the row class to create a horizontal group and inside it place three col classes like col-4 for equal width columns. Bootstrap's grid system divides the row into 12 parts, so each column with col-4 takes one-third width, making three columns side by side.

📐

Syntax

Bootstrap uses a grid system with rows and columns. A row groups columns horizontally. Columns use classes like col-4 to set their width out of 12 parts. For three equal columns, each column gets col-4.

row: container for columns
col-4: column taking 4/12 width (one-third)

html

<div class="row">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

Output

Three equal columns side by side horizontally

💻

Example

This example shows a simple three column layout using Bootstrap 5. Each column is equal width and stacks vertically on small screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 3 Column Layout</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

A page with three colored columns side by side on medium+ screens and stacked on small screens

⚠️

Common Pitfalls

Common mistakes when creating three column layouts in Bootstrap include:

Not using a row container, which breaks the layout.
Using column widths that don't add up to 12, causing wrapping or uneven columns.
Forgetting responsive classes, so columns don't stack nicely on small screens.

Always wrap columns in a row and use widths that sum to 12 for a perfect fit.

html

<!-- Wrong: No row container -->
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>

<!-- Right: Columns inside a row -->
<div class="row">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

Output

Wrong layout without row: columns stack vertically; Right layout: columns side by side

📊

Quick Reference

Bootstrap grid basics for three columns:

Class	Meaning	Width Fraction
row	Container for columns	Full width
col-4	Column taking 4 parts out of 12	1/3 width
col-12 col-md-4	Full width on small, 1/3 on medium+	Responsive
container	Centers content with padding	Varies

✅

Key Takeaways

Use a row to group columns horizontally in Bootstrap.

Assign each column a width class like col-4 to create three equal columns.

Ensure column widths add up to 12 to avoid layout issues.

Use responsive classes like col-12 col-md-4 for stacking on small screens.

Always include Bootstrap CSS and a container for proper spacing and alignment.