0
0
Bootsrapmarkup~5 mins

Row and column structure in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Rows and columns help you organize content neatly on a webpage. They make your page look good on all screen sizes.

When you want to place items side by side, like pictures or text blocks.
When you want your webpage to adjust nicely on phones, tablets, and computers.
When you want to create a grid layout, like a photo gallery or product list.
When you want to control spacing and alignment easily.
When you want to build a responsive design without writing complex CSS.
Syntax
Bootsrap
<div class="container">
  <div class="row">
    <div class="col">Content here</div>
    <div class="col">More content</div>
  </div>
</div>

The row class groups columns horizontally.

The col class creates flexible columns inside a row.

Examples
A single column that takes full width inside the row.
Bootsrap
<div class="row">
  <div class="col">One column</div>
</div>
Two columns each taking half the row width.
Bootsrap
<div class="row">
  <div class="col-6">Half width</div>
  <div class="col-6">Half width</div>
</div>
Columns with different widths: one third and two thirds.
Bootsrap
<div class="row">
  <div class="col-4">One third</div>
  <div class="col-8">Two thirds</div>
</div>
Sample Program

This example shows three equal columns inside a row. Each column has background color and padding to see the layout clearly. The page adjusts nicely on different screen sizes.

Bootsrap
<!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">
    <h1 class="mb-3">Row and Column Structure</h1>
    <div class="row">
      <div class="col-4 bg-primary text-white p-3">Column 1 (4 units)</div>
      <div class="col-4 bg-success text-white p-3">Column 2 (4 units)</div>
      <div class="col-4 bg-danger text-white p-3">Column 3 (4 units)</div>
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Bootstrap grid uses 12 units per row. Columns add up to 12 for full width.

Use col without a number for equal width columns automatically.

Rows have negative margins; always place columns inside rows to avoid layout issues.

Summary

Rows group columns horizontally to create layouts.

Columns divide the row space and can have fixed or flexible widths.

Using rows and columns helps build responsive and neat web pages easily.