0
0
Bootsrapmarkup~5 mins

Column sizing (col-1 through col-12) in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Column sizing helps you control how wide each part of your page is. It makes your layout neat and organized.

When you want to divide a row into parts with different widths.
When you want a sidebar to be smaller than the main content area.
When you want to create a grid of items that fit nicely on the page.
When you want your page to look good on different screen sizes.
When you want to control spacing without writing custom CSS.
Syntax
Bootsrap
<div class="col-1">...</div>
<div class="col-12">...</div>

Use col-1 to col-12 to set column width out of 12 parts.

All columns in a row add up to 12 for a full width row.

Examples
This divides the row into 4 parts and 8 parts, totaling 12 parts.
Bootsrap
<div class="col-4">Content</div>
<div class="col-8">Content</div>
Two equal columns each taking half the row width.
Bootsrap
<div class="col-6">Half width</div>
<div class="col-6">Half width</div>
One column takes 3 parts, the other takes 9 parts of the row.
Bootsrap
<div class="col-3">One quarter</div>
<div class="col-9">Three quarters</div>
Sample Program

This example shows three rows with different column sizes. Each colored box shows how much space it takes in the row using col-* classes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Column Sizing Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      background-color: #007bff;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.25rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <main class="container mt-4">
    <h1>Bootstrap Column Sizing (col-1 through col-12)</h1>
    <section class="row">
      <div class="col-3 box">col-3</div>
      <div class="col-6 box">col-6</div>
      <div class="col-3 box">col-3</div>
    </section>
    <section class="row">
      <div class="col-4 box">col-4</div>
      <div class="col-8 box">col-8</div>
    </section>
    <section class="row">
      <div class="col-12 box">col-12 (full width)</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Columns always add up to 12 parts in a row for full width.

If columns add up to less than 12, leftover space stays empty.

Use responsive classes like col-md-6 for different sizes on different screens.

Summary

Use col-1 to col-12 to set column widths out of 12 parts.

Columns in a row add up to 12 for full width layout.

Column sizing helps create neat, responsive page layouts easily.