BootstrapHow-ToBeginner · 4 min read

How to Use col in Bootstrap: Simple Guide with Examples

In Bootstrap, use the col class inside a row to create flexible grid columns that adjust based on screen size. You can specify column widths like col-6 for half width or use responsive variants like col-md-4 for medium screens and up.

📐

Syntax

The basic syntax for using columns in Bootstrap is to place elements with col classes inside a row container, which itself is inside a container or container-fluid.

container: Wraps the grid and centers content.
row: Creates a horizontal group of columns.
col: Defines a column that automatically sizes equally.
col-{breakpoint}-{number}: Defines column width for specific screen sizes (e.g., col-md-6 is half width on medium screens).

html

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

Output

Three equal-width columns side by side inside a container.

💻

Example

This example shows three columns inside a row. Each column uses col to share space equally. Resize the browser to see how columns adjust automatically.

html

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

Output

A page with three colored columns side by side that resize equally on all screen sizes.

⚠️

Common Pitfalls

Common mistakes when using col in Bootstrap include:

Not wrapping col elements inside a row, which breaks the layout.
Using column numbers that add up to more than 12, causing wrapping or overflow.
Forgetting responsive prefixes like col-md-6, which can cause unexpected layouts on different screen sizes.

html

<!-- Wrong: col outside row -->
<div class="container">
  <div class="col">No row wrapper</div>
  <div class="col">No row wrapper</div>
</div>

<!-- Right: col inside row -->
<div class="container">
  <div class="row">
    <div class="col">Correct column</div>
    <div class="col">Correct column</div>
  </div>
</div>

Output

The first example breaks layout; the second shows two columns side by side correctly.

📊

Quick Reference

Class	Description
container	Centers content and adds horizontal padding
row	Creates a horizontal group for columns
col	Creates equal-width columns automatically
col-6	Creates a column that takes 6 of 12 grid spaces (half width)
col-md-4	Column takes 4 of 12 spaces on medium screens and larger
col-auto	Column width adjusts to content size

✅

Key Takeaways

Always place col classes inside a row for proper layout.

Use responsive classes like col-sm-6 or col-lg-3 to control column widths on different screen sizes.

Columns inside a row should add up to 12 or less to avoid wrapping issues.

Use just col for equal-width columns that automatically adjust.

Bootstrap grid is mobile-first; specify smaller breakpoints first for best responsiveness.