12-column grid model in Bootsrap - Browser Rendering Trace

Render Flow - 12-column grid model

Load HTML with container

↓

Create container box

↓

Load row inside container

↓

Create row box with flex display

↓

Load columns inside row

↓

Create 12 equal width columns

↓

Apply gutter spacing

↓

Render columns side by side

Bootstrap's 12-column grid uses a container holding rows, which hold columns. The row uses flexbox to arrange columns side by side, dividing space into 12 equal parts with gutters between columns.

Render Steps - 5 Steps

Code Added:<div class="container"> ... </div>

Before

[Empty page]

→

After

[Container box]
[__________]

Adding the container creates a centered box with horizontal padding to hold content.

🔧 Browser Action:Creates container block with padding and max width

Code Sample

Three equal columns side by side, each taking 4 of the 12 grid parts, inside a container with spacing.

Bootsrap

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

Render Quiz - 3 Questions

After applying step 3, what fraction of the row width does the single col-4 column occupy?

A One-fourth of the row width

B One-third of the row width

C Half of the row width

D Full row width

Common Confusions - 3 Topics

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

If the total column widths exceed 12, Bootstrap wraps columns to next line. For example, three col-5 columns sum to 15, so the last wraps down.

💡 Sum of col-* numbers in a row should be 12 or less to stay in one line.

Why is there space between columns even though I didn't add margin?

Bootstrap columns have horizontal padding (gutters) inside each column to create space between columns visually.

💡 Gutters come from column padding, not margin.

Why does col-4 take exactly one-third width?

Because Bootstrap divides the row into 12 equal parts, col-4 means 4 parts out of 12, which is 33.333%.

💡 Column width = (col number / 12) * 100%

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
container	max-width + padding	block	Centers content with horizontal padding	Wrap grid content
row	display: flex; flex-wrap: wrap;	horizontal main axis	Aligns columns side by side, wraps if needed	Hold columns in grid
col-1 to col-12	flex: 0 0 (n/12)*100%; max-width: (n/12)*100%;	horizontal width	Sets column width as fraction of row	Create responsive columns
gutter	padding-left/right on cols	horizontal spacing	Adds space between columns	Separate columns visually

Concept Snapshot

Bootstrap 12-column grid divides row into 12 equal parts. Columns use classes col-1 to col-12 to set width as fraction of 12. Rows use flexbox to arrange columns horizontally. Gutters are padding inside columns creating space. Sum of column widths in a row should be 12 or less to avoid wrapping.