0
0
Bootsrapmarkup~5 mins

Equal-width columns in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Equal-width columns help you divide space evenly on a webpage. This makes your layout look neat and balanced.

You want to show multiple items side by side with the same width.
You need a simple grid layout without specifying exact sizes.
You want your columns to adjust automatically on different screen sizes.
You want to create a navigation bar with evenly spaced links.
You want to display product features in equal boxes.
Syntax
Bootsrap
<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

Use col class inside a row to create equal-width columns.

You can add as many col divs as you want; they will share space equally.

Examples
Three equal columns sharing the row space evenly.
Bootsrap
<div class="row">
  <div class="col">One</div>
  <div class="col">Two</div>
  <div class="col">Three</div>
</div>
Two equal columns side by side.
Bootsrap
<div class="row">
  <div class="col">Left</div>
  <div class="col">Right</div>
</div>
Four equal columns filling the row.
Bootsrap
<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>
Sample Program

This example shows three equal-width columns inside a row. Each column has a different background color and centered text. The columns share the space evenly across the container.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Equal-width Columns Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Equal-width Columns</h1>
    <div class="row border p-3">
      <div class="col bg-primary text-white text-center p-3">Column 1</div>
      <div class="col bg-success text-white text-center p-3">Column 2</div>
      <div class="col bg-warning text-dark text-center p-3">Column 3</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Equal-width columns automatically adjust their size to fill the row evenly.

On smaller screens, columns stack vertically by default for better readability.

You can add padding and background colors to columns to make them visually distinct.

Summary

Use col inside a row to create equal-width columns easily.

Columns share space evenly without needing to specify widths.

Bootstrap handles responsiveness so columns stack on small screens.