Holy grail layout with Bootstrap - Browser Rendering Trace

Render Flow - Holy grail layout with Bootstrap

Load HTML structure

↓

Bootstrap CSS loaded

↓

Parse container and row classes

↓

Create flexbox layout for row

↓

Assign col classes to children

↓

Calculate widths based on col-*

↓

Render columns side by side

↓

Apply gutters (spacing)

↓

Paint final layout

The browser reads the HTML with Bootstrap classes, applies Bootstrap's flexbox grid styles, calculates column widths, and renders the three-column holy grail layout with gutters and responsive behavior.

Render Steps - 5 Steps

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

Before

[Empty page]

→

After

[Container box centered with some horizontal padding]
[__________________________]
[|                        |]
[|                        |]
[|                        |]
[|________________________|]

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

🔧 Browser Action:Creates a block formatting context and applies container max-width and padding.

Code Sample

This code creates a three-column layout with a left sidebar, main content area, and right sidebar using Bootstrap's grid system and background colors for clarity.

Bootsrap

<div class="container">
  <div class="row">
    <nav class="col-2 bg-light">Left Sidebar</nav>
    <main class="col-8 bg-white">Main Content</main>
    <aside class="col-2 bg-light">Right Sidebar</aside>
  </div>
</div>

Bootsrap

body { margin: 0; font-family: Arial, sans-serif; }
nav, aside { padding: 1rem; }
main { padding: 1rem; }
.bg-light { background-color: #f8f9fa; }
.bg-white { background-color: #ffffff; }

Render Quiz - 3 Questions

After applying step 2, how are the child elements inside the row arranged?

A Horizontally side by side using flexbox

B Stacked vertically like block elements

C Overlapping each other in the same space

D Hidden from view

Common Confusions - 3 Topics

Why do the columns not stack vertically on small screens?

Because we used fixed col-2 and col-8 classes without responsive breakpoints, Bootstrap keeps columns side by side even on small screens.

💡 Use responsive classes like col-sm-2 or col-md-2 to control stacking on smaller devices.

Why is there space between columns?

Bootstrap's row class adds gutters (horizontal padding) between columns to separate them visually.

💡 Gutters come from negative margins on row and padding on columns; removing gutters requires special classes.

Why does the main content area not fill the entire space?

Because the left and right sidebars take fixed column widths (col-2 each), main content uses col-8, so total is 12 columns.

💡 Bootstrap grid divides row into 12 parts; columns widths add up to 12 for full width.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex (on .row)	Main axis: row (horizontal)	Arranges children side by side	Create horizontal layout for columns
flex-basis	auto (via col-*)	Main axis	Sets initial width of flex items	Control column widths in grid
padding	1rem (on columns)	N/A	Adds space inside columns	Separate content from edges
background-color	#f8f9fa or #fff	N/A	Colors columns for visual distinction	Highlight different layout areas
container max-width	varies by viewport	N/A	Centers content and limits width	Responsive page width control

Concept Snapshot

Holy grail layout uses Bootstrap's grid with a container and a row. The row uses flexbox to arrange columns horizontally. Columns use col-* classes to set widths (out of 12). Left and right sidebars use col-2, main content uses col-8. Gutters add spacing between columns. Responsive classes control stacking on small screens.

Practice

1. What is the main purpose of the Holy Grail layout in web design?

easy

A. To create a single column layout for mobile devices

B. To organize a page into header, footer, and three columns in the middle

C. To add animations to buttons and links

D. To style text with different fonts and colors

Solution

1. Step 1: Understand layout structure

   The Holy Grail layout divides the page into a header, footer, and three columns in the middle.

2. Step 2: Identify the purpose

   This layout helps organize content clearly and is common in web design.

3. Final Answer:

   To organize a page into header, footer, and three columns in the middle -> Option B

4. Quick Check:

   Holy Grail layout = header + footer + 3 columns [OK]

Hint: Remember: Holy Grail = header, footer, and 3 columns [OK]

Common Mistakes:

• Confusing layout with styling features
• Thinking it is only for mobile layouts
• Mixing it up with animation or font styling

2. Which Bootstrap class is used to create a row that holds columns in the Holy Grail layout?

easy

A. container-fluid

B. navbar

C. col

D. row

Solution

1. Step 1: Identify Bootstrap grid structure

   Bootstrap uses row to group columns horizontally.

2. Step 2: Understand role of classes

   container-fluid is for full-width container, col defines columns, and navbar is for navigation bars.

3. Final Answer:

   row -> Option D

4. Quick Check:

   Bootstrap row groups columns = row [OK]

Hint: Rows hold columns; use class 'row' for horizontal grouping [OK]

Common Mistakes:

• Using 'container-fluid' instead of 'row' for columns
• Confusing 'col' with 'row'
• Using 'navbar' which is unrelated to layout rows

3. Given this Bootstrap code snippet for the middle section:

<div class="row">
  <div class="col-2">Left</div>
  <div class="col-8">Center</div>
  <div class="col-2">Right</div>
</div>

What will be the layout on a large screen?

medium

A. Three columns: Left narrow, Center wide, Right narrow side by side

B. Three stacked rows: Left, Center, Right vertically

C. Only Center column visible, Left and Right hidden

D. Two columns: Left and Right combined, Center alone

Solution

1. Step 1: Analyze column widths

   Bootstrap grid has 12 units. col-2 means 2 units wide, col-8 means 8 units wide.

2. Step 2: Understand row behavior

   Columns inside a row appear side by side horizontally if total units ≤ 12.

3. Final Answer:

   Three columns: Left narrow, Center wide, Right narrow side by side -> Option A

4. Quick Check:

   col-2 + col-8 + col-2 = 12 units side by side [OK]

Hint: Sum col-* units to 12 for side-by-side columns [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Misunderstanding col-2 as 2% width
• Assuming columns hide automatically

4. This Bootstrap code tries to create a Holy Grail layout middle section:

<div class="row">
  <div class="col-3">Left</div>
  <div class="col-6">Center</div>
  <div class="col-4">Right</div>
</div>

What is the problem with this code?

medium

A. The 'row' class should be 'container-row'

B. The columns are missing the 'container' class

C. The total column widths exceed 12 units, causing layout issues

D. The columns should use 'col-md-' instead of 'col-'

Solution

1. Step 1: Calculate total column units

   col-3 + col-6 + col-4 = 3 + 6 + 4 = 13 units, which is more than 12.

2. Step 2: Understand Bootstrap grid limits

   Bootstrap grid rows can only hold 12 units total; exceeding causes wrapping or broken layout.

3. Final Answer:

   The total column widths exceed 12 units, causing layout issues -> Option C

4. Quick Check:

   Sum of col-* > 12 breaks layout [OK]

Hint: Sum col-* classes must be 12 or less per row [OK]

Common Mistakes:

• Ignoring total column width sum
• Confusing container and row classes
• Thinking 'col-' is invalid syntax

5. You want a Holy Grail layout with a header, footer, and three columns in the middle using Bootstrap. The left and right columns should be narrow on desktop but stack vertically on small screens. Which Bootstrap classes combination achieves this?

hard

A. <div class="container"><header class="row"><div class="col-12 col-md-2">Left</div><div class="col-12 col-md-8">Center</div><div class="col-12 col-md-2">Right</div></div><footer class="row"><div class="col-12">Footer</div></footer></div>

B. <div class="container"><header class="row"><div class="col-12">Header</div></header><div class="row"><div class="col-2">Left</div><div class="col-8">Center</div><div class="col-2">Right</div></div><footer class="row"><div class="col-12">Footer</div></footer></div>

C. <div class="container"><header class="row"><div class="col-4 col-md-2">Left</div><div class="col-4 col-md-8">Center</div><div class="col-4 col-md-2">Right</div></div><footer class="row"><div class="col-12">Footer</div></footer></div>

D. <div class="container"><header class="row"><div class="col-12">Header</div></header><div class="row"><div class="col-md-2 col-12">Left</div><div class="col-md-9 col-12">Center</div><div class="col-md-2 col-12">Right</div></div><footer class="row"><div class="col-12">Footer</div></footer></div>

Solution

1. Step 1: Understand responsive column classes

   Using col-12 col-md-2 means full width on small screens and 2 units wide on medium+ screens.

2. Step 2: Check stacking behavior

   Left and right columns stack vertically on small screens (col-12) and become narrow side columns on desktop (col-md-2).

3. Step 3: Verify header and footer full width

   Header and footer use col-12 for full width always.

4. Final Answer:

   col-12 col-md-2 for left/right columns and col-12 col-md-8 for center -> Option A

5. Quick Check:

   Responsive col-12 then col-md-* = stacking then columns [OK]

Hint: Use col-12 for small and col-md-* for desktop widths [OK]

Common Mistakes:

• Using only col-md-* without col-12 for stacking
• Using column widths that exceed 12 units on desktop
• Not including container or row classes properly