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.