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

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>

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.

Practice

1. What does the Bootstrap class col-6 mean in a grid layout?

easy

A. The column takes up half the width of the row (6 out of 12 parts).

B. The column takes up 6 pixels width.

C. The column is hidden on screens smaller than 6 inches.

D. The column has 6 columns inside it.

Solution

1. Step 1: Understand Bootstrap grid system

   Bootstrap divides a row into 12 equal parts for layout.

2. Step 2: Interpret col-6

   The class col-6 means the column uses 6 of those 12 parts, which is half the row width.

3. Final Answer:

   The column takes up half the width of the row (6 out of 12 parts). -> Option A

4. Quick Check:

   col-6 means 6/12 width = half [OK]

Hint: Remember: col-# means # out of 12 parts width [OK]

Common Mistakes:

• Thinking col-6 means 6 pixels wide
• Confusing col-6 with number of columns inside
• Assuming col-6 hides the column on small screens

2. Which of the following is the correct way to create a column that takes one quarter of the row width using Bootstrap classes?

easy

A. col-3

B. col-4

C. col-6

D. col-9

Solution

1. Step 1: Calculate quarter width in 12 parts

   One quarter of 12 parts is 12 ÷ 4 = 3 parts.

2. Step 2: Match with Bootstrap class

   The class col-3 means 3 parts width, which is one quarter.

3. Final Answer:

   <code>col-3</code> -> Option A

4. Quick Check:

   3 parts = 1/4 width [OK]

Hint: Divide 12 by desired fraction to find col-# [OK]

Common Mistakes:

• Choosing col-4 which is one third, not quarter
• Confusing col-6 as quarter width
• Picking col-9 which is three quarters

3. Given this HTML snippet:

<div class='row'>
  <div class='col-4'>A</div>
  <div class='col-8'>B</div>
</div>

How will the columns appear on a large screen?

medium

A. Column A takes 4/12 width, Column B takes 8/12 width stacked vertically.

B. Column A and B stack vertically, each full width.

C. Column A takes 1/3 width, Column B takes 2/3 width side by side.

D. Column A takes 8/12 width, Column B takes 4/12 width side by side.

Solution

1. Step 1: Understand col-4 and col-8 widths

   col-4 means 4 parts out of 12 (1/3), col-8 means 8 parts out of 12 (2/3).

2. Step 2: Check layout behavior in Bootstrap

   Columns inside a row appear side by side if total is 12 or less.

3. Final Answer:

   Column A takes 1/3 width, Column B takes 2/3 width side by side. -> Option C

4. Quick Check:

   4 + 8 = 12 parts, side by side [OK]

Hint: Sum col-# classes; if 12 or less, columns sit side by side [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Mixing up col-4 and col-8 widths
• Assuming col-4 means 1/4 width

4. What is wrong with this Bootstrap column layout?

<div class='row'>
  <div class='col-5'>X</div>
  <div class='col-8'>Y</div>
</div>

medium

A. The classes col-5 and col-8 are invalid in Bootstrap.

B. The columns add up to more than 12, causing layout issues.

C. The columns will stack vertically because col-5 is less than col-6.

D. The row class is missing, so columns won't align.

Solution

1. Step 1: Add column widths

   col-5 means 5 parts, col-8 means 8 parts; total is 5 + 8 = 13 parts.

2. Step 2: Check Bootstrap grid rules

   Columns in a row should add up to 12 or less for proper layout; more than 12 breaks layout.

3. Final Answer:

   The columns add up to more than 12, causing layout issues. -> Option B

4. Quick Check:

   5 + 8 = 13 > 12 breaks layout [OK]

Hint: Sum col-# classes; must be ≤ 12 for correct layout [OK]

Common Mistakes:

• Thinking col-5 or col-8 are invalid classes
• Assuming columns stack because of size difference
• Ignoring total width exceeding 12

5. You want to create a responsive layout with three columns where:
- The first column is 3 parts wide
- The second column is twice as wide as the first
- The third column fills the remaining space
Which Bootstrap classes should you use?

hard

A. col-3, col-5, col-4

B. col-3, col-6, col-4

C. col-2, col-4, col-6

D. col-3, col-6, col-3

Solution

1. Step 1: Assign widths based on conditions

   First column = 3 parts; second column = twice first = 6 parts.

2. Step 2: Calculate remaining space for third column

   Total so far: 3 + 6 = 9 parts; remaining = 12 - 9 = 3 parts.

3. Step 3: Match with Bootstrap classes

   Use col-3, col-6, and col-3 for the three columns respectively.

4. Final Answer:

   <code>col-3</code>, <code>col-6</code>, <code>col-3</code> -> Option D

5. Quick Check:

   3 + 6 + 3 = 12 parts total [OK]

Hint: Double first col width, subtract sum from 12 for last [OK]

Common Mistakes:

• Choosing widths that sum over 12
• Not doubling the first column width correctly
• Assigning third column more than remaining space