BootstrapHow-ToBeginner · 3 min read

How to Create Row and Column in Bootstrap: Simple Guide

In Bootstrap, create a row by using a <div> with class row, and inside it, add columns with classes like col or col-{breakpoint}-{number}. This structure helps arrange content horizontally and responsively.

📐

Syntax

Use a <div> with class row to create a horizontal group. Inside it, add <div> elements with col classes to define columns. Columns automatically share the row space equally or can be sized with numbers (1-12).

row: container for columns, creates horizontal grouping.
col: a flexible column that shares space equally.
col-{breakpoint}-{number}: column with fixed width at a screen size breakpoint (e.g., col-md-6 for half width on medium screens).

html

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

Output

Three equal columns arranged side by side horizontally inside a row.

💻

Example

This example shows a row with three columns. The first column takes half the row width on medium screens and above, the other two share the remaining space equally.

html

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

Output

A horizontal row with three colored columns: first is half width, next two are quarter width each on medium+ screens.

⚠️

Common Pitfalls

Common mistakes include:

Not wrapping columns inside a row, which breaks layout.
Using column widths that add up to more than 12, causing wrapping or overflow.
Forgetting to include Bootstrap CSS, so classes have no effect.
Not using responsive classes, leading to poor display on different screen sizes.

html

<!-- Wrong: columns outside row -->
<div class="col">Column without row</div>
<div class="col">Another column</div>

<!-- Right: columns inside row -->
<div class="row">
  <div class="col">Column inside row</div>
  <div class="col">Another column</div>
</div>

Output

The first example will not align columns properly; the second example shows correct horizontal alignment.

📊

Quick Reference

Bootstrap grid basics:

Class	Description
row	Container for columns, creates horizontal grouping
col	Flexible column sharing equal space
col-6	Column taking 6 of 12 parts (half width)
col-md-4	Column taking 4 parts on medium screens and up
container	Wraps rows for proper alignment and padding

✅

Key Takeaways

Always wrap columns inside a row for proper horizontal layout.

Use col classes to create flexible columns that share space equally.

Specify column widths with numbers (1-12) to control size precisely.

Use responsive classes like col-md-6 to adjust layout on different screen sizes.

Include Bootstrap CSS for grid classes to work correctly.