Holy grail layout with Bootstrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Identify the correct Bootstrap grid classes for a Holy Grail layout

You want a Holy Grail layout with a header, footer, and three columns: left sidebar, main content, and right sidebar. Which Bootstrap grid classes correctly assign the widths for the sidebars and main content in a 12-column grid?

A Left sidebar: col-4, Main content: col-4, Right sidebar: col-4

B Left sidebar: col-2, Main content: col-8, Right sidebar: col-2

C Left sidebar: col-3, Main content: col-6, Right sidebar: col-3

D Left sidebar: col-1, Main content: col-10, Right sidebar: col-1

💡 Hint

Remember the total columns in Bootstrap grid add up to 12.

The Holy Grail layout typically has narrow sidebars and a wider main content area. Using col-2 for each sidebar and col-8 for main content sums to 12 columns, fitting the grid perfectly.

❓ selector

intermediate

Which CSS selector targets the main content area in a Holy Grail layout?

Given this HTML snippet for a Holy Grail layout:

<div class="container">
  <header>...</header>
  <div class="row">
    <aside class="col-2">Left</aside>
    <main class="col-8">Content</main>
    <aside class="col-2">Right</aside>
  </div>
  <footer>...</footer>
</div>

Which CSS selector will style only the main content area?

A container > main

B div.row > aside

C main.col-8

D aside.col-2

💡 Hint

Look for the tag and class that matches the main content.

The main content uses the <main> tag with class col-8. The selector main.col-8 targets it specifically.

❓ rendering

advanced

What is the visual result of this Bootstrap Holy Grail layout code?

Consider this Bootstrap HTML:

<div class="container">
  <header class="bg-primary text-white p-3 text-center">Header</header>
  <div class="row">
    <aside class="col-2 bg-light p-3">Left Sidebar</aside>
    <main class="col-8 p-3">Main Content</main>
    <aside class="col-2 bg-light p-3">Right Sidebar</aside>
  </div>
  <footer class="bg-secondary text-white p-3 text-center">Footer</footer>
</div>

What will the user see in the browser?

A A vertical stack of header, left sidebar, main content, right sidebar, and footer all full width.

B A header and footer with white backgrounds, sidebars with blue backgrounds, and main content with gray background.

C Only the header and footer visible; sidebars and main content are hidden.

D A header with blue background and white text, a row with left and right sidebars in light background and main content in center, and a footer with gray background and white text.

💡 Hint

Check the Bootstrap background and text color classes used.

The header uses bg-primary (blue) and text-white. Sidebars have bg-light (light gray). Footer uses bg-secondary (gray) and text-white. The row arranges sidebars and main content horizontally.

❓ accessibility

advanced

Which ARIA role best improves accessibility for the main content in a Holy Grail layout?

In a Holy Grail layout, which ARIA role should you add to the main content area to help screen readers identify it correctly?

A role="main"

B role="banner"

C role="complementary"

D role="navigation"

💡 Hint

Think about the main content landmark for assistive technologies.

The role="main" explicitly marks the main content area, helping screen readers skip to it easily. Other roles like banner and navigation are for header and menus.

🧠 Conceptual

expert

Why is the Holy Grail layout considered challenging to implement responsively with Bootstrap?

Which reason best explains the challenge of creating a fully responsive Holy Grail layout using Bootstrap's grid system?

A Because sidebars must collapse or reorder on small screens while keeping main content visible and readable.

B Because Bootstrap does not support multiple columns in a row.

C Because Bootstrap grids only allow fixed pixel widths, not percentages.

D Because Bootstrap requires JavaScript to display sidebars.

💡 Hint

Think about how layouts adapt on phones and tablets.

The Holy Grail layout needs sidebars to hide or move below main content on small screens to keep content readable. Bootstrap's grid helps but requires careful use of responsive classes and order utilities.

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