Column sizing (col-1 through col-12) in Bootsrap - Browser Rendering Trace

Render Flow - Column sizing (col-1 through col-12)

Read HTML with .row and .col-* classes

↓

Create DOM nodes for row and columns

↓

Bootstrap CSS applies flexbox to .row

↓

Calculate width % for each .col-* based on 12-grid

↓

Set flex-basis and max-width for columns

↓

Browser lays out columns side-by-side

↓

Paint columns with content

Bootstrap reads the HTML with column classes, applies flexbox layout on the row, calculates each column's width as a fraction of 12, and then lays out columns side-by-side with those widths.

Render Steps - 4 Steps

Code Added:<div class="row"> with no columns

Before

[container]

(empty space inside container)

→

After

[container]
[ row ]
(empty inside row)

Adding the row creates a flex container but no columns yet, so no visible boxes inside.

🔧 Browser Action:Creates flex container, prepares for flex items

Code Sample

This code creates a row with three columns sized 3, 6, and 3 out of 12, so their widths are 25%, 50%, and 25% respectively, arranged side-by-side.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-3">Col 3</div>
    <div class="col-6">Col 6</div>
    <div class="col-3">Col 3</div>
  </div>
</div>

Bootsrap

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

Render Quiz - 3 Questions

After applying step 3, how are the columns arranged visually?

A Three columns stacked vertically

B Two columns side-by-side: one 25% wide and one 50% wide

C One full-width column

D Two columns stacked vertically

Common Confusions - 3 Topics

Why do my columns not add up to full width and leave space?

If the sum of col-* widths is less than 12, the remaining space stays empty. Columns only fill the fraction you specify (see render_step 4).

💡 Sum your col-* numbers to 12 for a full row width.

Why does col-6 take half the row width?

Bootstrap divides the row into 12 parts. col-6 means 6 parts out of 12, which is 50% width (render_step 3 shows this).

💡 Each col number is a fraction of 12.

Why do columns stack vertically on small screens?

Without responsive classes, columns wrap if they can't fit horizontally. The .row uses flex-wrap: wrap, so columns move to next line if needed.

💡 Use responsive col classes to control stacking on different screen sizes.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
flex	0 0 8.33%	Main axis (row)	Column width 1/12 of container	Smallest column width
flex	0 0 25%	Main axis (row)	Column width 3/12 (25%)	Common small column
flex	0 0 50%	Main axis (row)	Column width 6/12 (50%)	Half width column
flex	0 0 100%	Main axis (row)	Full width column	Single column row
max-width	same as flex-basis	N/A	Limits max width to column size	Prevents columns from growing

Concept Snapshot

Bootstrap columns use a 12-part grid. .col-1 to .col-12 set width as fraction of 12. Each column uses flex: 0 0 (width%) and max-width. Columns sit side-by-side inside a .row with flexbox. Sum of col-* numbers should be 12 for full row width. Columns wrap on small screens unless responsive classes used.

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