Holy grail layout with Bootstrap

Introduction

The Holy Grail layout is a common webpage design with a header, footer, main content, and sidebars. Bootstrap helps you build this layout easily and responsively.

When you want a webpage with a top header, bottom footer, and three columns in the middle.

When you want your page to look good on phones, tablets, and desktops without extra work.

When you want to organize content clearly with sidebars for menus or ads and a main area for important info.

When you want to use a popular framework to save time and avoid writing complex CSS.

When you want to learn how grid systems help arrange page sections neatly.

Syntax

Bootsrap

<div class="container">
  <header class="row">
    <div class="col-12">Header content</div>
  </header>
  <div class="row">
    <aside class="col-md-3">Left sidebar</aside>
    <main class="col-md-6">Main content</main>
    <aside class="col-md-3">Right sidebar</aside>
  </div>
  <footer class="row">
    <div class="col-12">Footer content</div>
  </footer>
</div>

Bootstrap uses a 12-column grid system. You divide 12 columns among your sections.

Use col-md-* classes to make columns responsive on medium and larger screens.

Examples

This example uses fixed column widths for sidebars and main content on all screen sizes.

Bootsrap

<div class="container">
  <header class="row">
    <div class="col-12">Header</div>
  </header>
  <div class="row">
    <aside class="col-2">Left</aside>
    <main class="col-8">Main</main>
    <aside class="col-2">Right</aside>
  </div>
  <footer class="row">
    <div class="col-12">Footer</div>
  </footer>
</div>

This example stacks sidebars and main content on small screens and places them side by side on larger screens.

Bootsrap

<div class="container">
  <header class="row">
    <div class="col-12">Header</div>
  </header>
  <div class="row">
    <aside class="col-sm-4 col-12">Left sidebar</aside>
    <main class="col-sm-8 col-12">Main content</main>
  </div>
  <footer class="row">
    <div class="col-12">Footer</div>
  </footer>
</div>

Sample Program

This complete example shows a Holy Grail layout using Bootstrap's grid. The header and footer stretch full width. The middle row has two sidebars and a main content area. On small screens, sidebars stack above and below the main content.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Holy Grail Layout with Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    header, footer {
      background-color: #007bff;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    aside {
      background-color: #f8f9fa;
      padding: 1rem;
      border: 1px solid #dee2e6;
      min-height: 150px;
    }
    main {
      background-color: #e9ecef;
      padding: 1rem;
      border: 1px solid #ced4da;
      min-height: 150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="row">
      <div class="col-12">
        <h1>My Website Header</h1>
      </div>
    </header>
    <div class="row">
      <aside class="col-md-3 col-12">
        <h2>Left Sidebar</h2>
        <p>Links and info here.</p>
      </aside>
      <main class="col-md-6 col-12">
        <h2>Main Content</h2>
        <p>This is the main area where your important content goes.</p>
      </main>
      <aside class="col-md-3 col-12">
        <h2>Right Sidebar</h2>
        <p>Additional info or ads here.</p>
      </aside>
    </div>
    <footer class="row">
      <div class="col-12">
        <p>© 2024 My Website Footer</p>
      </div>
    </footer>
  </div>
</body>
</html>

Important Notes

Use Bootstrap's responsive grid classes to make your layout adapt to different screen sizes.

Adding padding and background colors helps visually separate the sections.

Test your layout by resizing the browser or using device simulation in browser DevTools.

Summary

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

Bootstrap's grid system makes it easy to create this layout with simple classes.

Responsive classes ensure the layout looks good on phones, tablets, and desktops.

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