Flex utilities in Bootsrap - Browser Rendering Trace

Render Flow - Flex utilities

Load HTML with flex container

↓

Parse CSS classes: d-flex, justify-content-center, align-items-center

↓

Apply display:flex to container

↓

Convert children to flex items

↓

Apply justify-content and align-items for alignment

↓

Calculate layout and paint flex items

↓

Composite final visual output

The browser reads the HTML and CSS classes, applies display:flex to the container, turns children into flex items, aligns them according to justify-content and align-items, then paints and composites the final layout.

Render Steps - 3 Steps

Code Added:class="d-flex"

Before

[Container]
  Item 1
  Item 2
  Item 3

→

After

[Container: flex row]
[Item 1][Item 2][Item 3]

Adding d-flex makes the container a flex container, so children line up in a row instead of stacking.

🔧 Browser Action:Creates flex formatting context and converts children to flex items

Code Sample

A flex container with three colored boxes centered horizontally and vertically inside a bordered box.

Bootsrap

<div class="d-flex justify-content-center align-items-center" style="height: 10rem; border: 1px solid #000;">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-secondary text-white">Item 2</div>
  <div class="p-2 bg-success text-white">Item 3</div>
</div>

Render Quiz - 3 Questions

After applying step 2 (justify-content-center), how are the flex items positioned inside the container?

A Spread out with space between each item

B Aligned to the left edge

C Centered horizontally with equal space on left and right

D Stacked vertically

Common Confusions - 2 Topics

Why don't my flex items center vertically when I use justify-content-center?

justify-content controls horizontal alignment along the main axis. To center vertically, you need align-items-center which controls cross axis alignment (see step 3).

💡 justify-content = horizontal alignment, align-items = vertical alignment in flex row

Why are my flex items still stacked vertically even after adding d-flex?

By default, flex-direction is row, so items line up horizontally. If items appear stacked, check if flex-direction was changed or if container height is too small (see step 1).

💡 d-flex makes children line up in a row unless flex-direction changes it

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	N/A	Turns container into flex container, children become flex items	Create flex layouts
justify-content	center	Main axis (row by default)	Centers items horizontally inside container	Horizontal alignment
align-items	center	Cross axis (vertical by default)	Centers items vertically inside container	Vertical alignment
flex-direction	row	Main axis direction	Arranges items in a row (default)	Layout direction
flex-wrap	nowrap	N/A	Items stay on one line, no wrapping	Control wrapping behavior

Concept Snapshot

Flex utilities in Bootstrap: - d-flex: makes container flex - justify-content-center: centers items horizontally - align-items-center: centers items vertically - Default flex direction is row - Use these classes to quickly align and layout items