Row and column structure in Bootsrap - Browser Rendering Trace

Render Flow - Row and column structure

Read <div class='container'>

→Create container box

↓

Read <div class='row'>

→Create row box inside container

↓

Read <div class='col'>

→Create column box inside row

↓

Read <div class='col'>

→Create second column box inside row

↓

Close row

↓

Close container

The browser reads the container, then the row inside it, and then the columns inside the row. Bootstrap's CSS styles the row as a flex container and columns as flex items, arranging them horizontally.

Render Steps - 4 Steps

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

Before

[Empty page]

→

After

[Container box centered horizontally]
[______________________________]
[                              ]
[______________________________]

Adding the container creates a centered box with some maximum width, giving a boundary for content.

🔧 Browser Action:Creates container block with max-width and horizontal margin auto

Code Sample

This code creates a container with a row that holds two equally wide columns side by side.

Bootsrap

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

Bootsrap

.container { max-width: 960px; margin: auto; }
.row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; }
.col { flex: 1; padding-left: 0.75rem; padding-right: 0.75rem; }

Render Quiz - 3 Questions

After step 4, how are the two columns arranged inside the row?

A Overlapping each other in the same space

B Side by side, each taking half the row width

C Stacked vertically, one on top of the other

D Only one column visible, the other hidden

Common Confusions - 3 Topics

Why do columns have space on the left and right but the row edges align with the container edges?

The row has negative side margins that cancel out the columns' side padding, so the row edges align with the container edges while columns keep spacing between them (see step 2 and 3).

💡 Row negative margins + column padding = aligned edges with spacing between columns

Why do columns automatically share equal width?

Because each column has flex:1, they grow equally to fill the row's horizontal space (see step 3 and 4).

💡 Columns with flex:1 split space evenly inside a flex row

Why do columns wrap to the next line on small screens?

The row uses flex-wrap: wrap, so if columns can't fit horizontally, they move down to the next line to keep content readable.

💡 flex-wrap: wrap lets columns stack vertically when needed

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	row (horizontal)	Makes container flexbox, arranging children in a row	Bootstrap .row class
flex-wrap	wrap	row	Allows columns to wrap to next line if no space	Responsive layouts
flex	1	N/A	Columns grow equally to fill row space	Bootstrap .col class
margin-left/right	-0.75rem	N/A	Offsets column padding to align row edges	Bootstrap .row class
padding-left/right	0.75rem	N/A	Adds space inside columns	Bootstrap .col class

Concept Snapshot

Bootstrap's row and column structure uses a container with a .row flex container. Columns inside the row have .col class with flex:1 to share space equally. Row has negative side margins to offset column padding, aligning edges. Columns have side padding for spacing between them. flex-wrap: wrap on row allows columns to wrap on smaller screens. This creates a responsive horizontal grid layout.