Holy grail layout with Bootstrap - Mini Project: Build & Apply

Holy Grail Layout with Bootstrap

📖 Scenario: You are building a classic web page layout called the Holy Grail Layout. This layout has a header at the top, a footer at the bottom, and three columns in the middle: a left sidebar, a main content area, and a right sidebar.Using Bootstrap's grid system and utility classes, you will create this layout so it looks good on desktop and stacks nicely on smaller screens.

🎯 Goal: Create a responsive Holy Grail layout using Bootstrap 5. The page should have:A header spanning full width at the topA footer spanning full width at the bottomA main section with three columns: left sidebar, main content, right sidebarThe sidebars should be narrower than the main contentOn small screens, the columns stack vertically

📋 What You'll Learn

Use Bootstrap 5 grid classes for layout

Create semantic HTML structure with

,

,

,

, and

Make the layout responsive so columns stack on small screens

Use Bootstrap container and row classes properly

Add distinct background colors to each section for clarity

💡 Why This Matters

🌍 Real World

The Holy Grail layout is a classic web page structure used in many websites to organize content clearly and accessibly.

💼 Career

Understanding how to build responsive layouts with Bootstrap is a key skill for front-end web developers and UI designers.

1

Create the basic HTML skeleton with Bootstrap

Create a basic HTML5 page with lang="en" and charset="UTF-8". Add the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <div> with class container to hold the page content.

Bootsrap

    
    
    Holy Grail Layout
    


    
        
    

Hint

Remember to include the Bootstrap CSS link inside the <head> and create a div with class container inside the body.

2

Add the header and footer sections

Inside the div with class container, add a <header> with class bg-primary text-white p-3 containing the text Header. Also add a <footer> with class bg-dark text-white p-3 mt-3 containing the text Footer.

Bootsrap

    
    
    Holy Grail Layout
    


    
        
        
    

Hint

Use Bootstrap background and text color classes for the header and footer. Add padding with p-3 and margin top mt-3 for the footer.

3

Add the main content area with three columns

Between the <header> and <footer>, add a <main> element with class row mt-3. Inside it, create three columns using Bootstrap grid classes: a left sidebar with class col-md-3 bg-light p-3 containing the text Left Sidebar, a main content area with class col-md-6 bg-white p-3 containing the text Main Content, and a right sidebar with class col-md-3 bg-light p-3 containing the text Right Sidebar. This will create three columns on medium and larger screens and stack them on smaller screens.

Bootsrap

    
    
    Holy Grail Layout
    


    
        Header
        
        Footer
    

Hint

Use Bootstrap's grid classes inside a row to create three columns. Use col-md-3 for sidebars and col-md-6 for main content. Add background colors and padding for clarity.

4

Make the layout responsive and accessible

Add aria-label attributes to the <aside> elements: aria-label="Left Sidebar" and aria-label="Right Sidebar". Also add role="main" to the <main> element. Finally, add a meta viewport tag inside the <head> with content width=device-width, initial-scale=1 to ensure proper scaling on mobile devices.

Bootsrap

    
    
    Holy Grail Layout
    


    
        Header
        
            Left Sidebar
            Main Content
            Right Sidebar
        
        Footer
    

Hint

Accessibility helps screen readers understand page structure. Add aria-label to sidebars and role="main" to the main content. The viewport meta tag ensures the page scales well on phones.

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