Mixing column widths in Bootsrap - Browser Rendering Trace

Render Flow - Mixing column widths

Load HTML with Bootstrap classes

↓

Parse Bootstrap CSS

↓

Identify .row container

↓

Identify .col-* classes

↓

Calculate column widths based on grid fractions

↓

Apply widths and gutters

↓

Render columns side by side

The browser loads the HTML and Bootstrap CSS, then calculates each column's width based on the grid classes like col-4 or col-8, applying gutters and placing columns side by side within the row container.

Render Steps - 3 Steps

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

Before

[Empty page]

→

After

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

Added container, row, and two columns with no width classes, so columns stack vertically by default.

🔧 Browser Action:Creates DOM nodes and applies default block layout

Code Sample

Two columns side by side: the first takes 4/12 of the row width, the second takes 8/12, showing mixed column widths.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-8">Column 2</div>
  </div>
</div>

Render Quiz - 3 Questions

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

A Both columns stacked vertically with no width set

B Both columns side by side with equal width

C First column takes 4/12 width on top, second column full width below

D First column takes 8/12 width, second column 4/12 width

Common Confusions - 2 Topics

Why do columns stack vertically instead of side by side?

Without col-* classes, columns behave as block elements stacking vertically. Adding col-* classes applies flexbox widths making them side by side (see render_steps 1 and 2).

💡 Always add col-* classes inside a .row to get horizontal columns.

Why doesn't col-4 plus col-8 fill the entire row perfectly?

Bootstrap grid uses 12 parts, so col-4 plus col-8 equals full width. Gutters (spacing) between columns reduce visible width slightly but columns still fill row (see render_steps 3).

💡 Column widths add up to 12 for full row width; gutters add spacing between columns.

Property Reference

Class	Width Fraction	Visual Effect	Common Use
col-4	4/12	Column takes one-third of row width	Smaller column
col-8	8/12	Column takes two-thirds of row width	Larger column
col	Auto	Columns share equal width	Equal columns
row	Container for columns	Creates horizontal flex container	Layout row

Concept Snapshot

Bootstrap grid uses 12 parts per row. Use col-* classes to set column widths (e.g., col-4 is 4/12). Columns inside .row sit side by side using flexbox. Without col-* classes, columns stack vertically. Gutters add spacing between columns visually.