Equal-width columns in Bootsrap - Browser Rendering Trace

Render Flow - Equal-width columns

Load HTML with .container and .row

↓

Identify .col elements inside .row

↓

Calculate equal width for each .col

↓

Apply width and padding

↓

Render columns side-by-side

↓

Paint and composite

Bootstrap reads the container and row structure, finds columns with .col class, calculates equal widths based on number of columns, then lays them out side-by-side with spacing.

Render Steps - 3 Steps

Code Added:<div class="container"> <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div> <div class="col">Column 3</div> </div> </div>

Before

[Empty page]

→

After

[Container]
  [Row]
    [Column 1]
    [Column 2]
    [Column 3]

HTML structure creates container, row, and three divs but no styling yet, so columns stack vertically.

🔧 Browser Action:Build DOM tree

Code Sample

Three equal-width columns appear side-by-side inside a container with spacing between them.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Render Quiz - 3 Questions

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

A Stacked vertically

B Side-by-side horizontally

C Overlapping each other

D Hidden from view

Common Confusions - 3 Topics

Why do columns stack vertically instead of side-by-side?

Because the .row does not have display:flex applied yet, so columns behave like normal block elements stacking vertically (see render_step 2).

💡 Make sure .row uses display:flex to align columns horizontally.

Why do columns have space between them?

Because each .col has left and right padding (gutters) that create spacing between columns (see render_step 3).

💡 Padding on columns creates gutters; margin on row balances it.

What if I add more .col elements?

All columns will share the row space equally, shrinking their width to fit side-by-side (flex:1 0 0% means equal flexible widths).

💡 More columns means narrower equal widths.

Property Reference

Property	Value Applied	Effect on Columns	Common Use
display	flex (on .row)	Makes children flex items, aligns horizontally	Create horizontal layout for columns
flex	1 0 0% (on .col)	Columns grow equally to fill row space	Equal width columns
padding-right / padding-left	0.75rem (on .col)	Adds horizontal spacing between columns	Gutter space between columns

Concept Snapshot

Bootstrap equal-width columns use .row with display:flex to arrange columns horizontally. Each .col uses flex:1 0 0% to share space equally. Padding on columns creates gutters between them. Without display:flex on .row, columns stack vertically. Adding more .col elements divides space evenly among them.