Responsive column classes in Bootsrap - Browser Rendering Trace

Render Flow - Responsive column classes

[Read HTML with col classes] -> [Create DOM elements] -> [Parse CSS media queries] -> [Match viewport width] -> [Apply appropriate col-* classes] -> [Calculate column widths] -> [Layout columns in row] -> [Paint columns] -> [Composite final page]

The browser reads the HTML with Bootstrap column classes, then applies CSS media queries based on screen size to adjust column widths responsively, laying out columns side-by-side or stacked depending on viewport width.

Render Steps - 3 Steps

Code Added:<div class="col-12">Column 1</div> and <div class="col-12">Column 2</div>

Before

[container]
  [row]
    [ ]
    [ ]

→

After

[container]
  [row]
    [Column 1__________]
    [Column 2__________]

Both columns take full width (12 units) stacking vertically on small screens.

🔧 Browser Action:Creates block-level columns stacked vertically

Code Sample

Two columns stack vertically on small screens and sit side-by-side equally on medium and larger screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">Column 1</div>
    <div class="col-12 col-md-6">Column 2</div>
  </div>
</div>

Render Quiz - 3 Questions

After applying col-12 and col-md-6 classes (render_step 2), how do the columns appear on a large screen?

A Two columns side-by-side each taking half the width

B Two columns stacked vertically each full width

C One column taking full width, the other hidden

D Columns overlap each other

Common Confusions - 2 Topics

Why do columns stack vertically on small screens even though I used col-md-6?

Because col-md-6 applies only on medium screens and larger. On smaller screens, col-12 or default stacking applies, so columns take full width and stack vertically (see render_steps 1 and 3).

💡 Responsive classes apply only at their breakpoint and above; smaller screens use default or smaller breakpoint classes.

What happens if I only use col-6 without any breakpoint prefix?

The columns will always be half width on all screen sizes, never stacking vertically (unlike col-md-6 which stacks below medium). This can cause layout issues on very small screens.

💡 Use breakpoint prefixes to control when columns stack or sit side-by-side.

Property Reference

Class	Breakpoint	Column Width	Visual Effect	Common Use
col-12	None (all screens)	100%	Full width column, stacks vertically	Small screens or default
col-sm-6	≥576px	50%	Half width columns side-by-side	Small devices and up
col-md-6	≥768px	50%	Half width columns side-by-side	Medium devices and up
col-lg-4	≥992px	33.33%	One third width columns side-by-side	Large devices and up
col-xl-3	≥1200px	25%	One quarter width columns side-by-side	Extra large devices and up

Concept Snapshot

Bootstrap responsive columns use classes like col-12, col-md-6. col-12 means full width on all screens. col-md-6 means half width on medium (≥768px) and larger screens. Columns stack vertically on small screens, side-by-side on medium+. Use breakpoint prefixes to control layout at different screen sizes.