Holy grail layout with Bootstrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a container for the holy grail layout using Bootstrap.

Bootsrap

<div class="[1]">
  <!-- Content here -->
</div>

Drag options to blanks, or click blank then click option'

Acontainer-fluid

Brow

Ccontainer

Dcol

Attempts:

3 left

💡 Hint

Common Mistakes

Using row instead of container causes layout issues.

Using container-fluid makes the container full width, not fixed.

The container class creates a responsive fixed-width container for the layout.

2fill in blank

medium

Complete the code to create a Bootstrap row for the holy grail layout.

Bootsrap

<div class="container">
  <div class="[1]">
    <!-- Columns here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acontainer

Bsection

Ccol

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using col instead of row breaks the grid structure.

Using container inside another container is incorrect here.

The row class creates a horizontal group of columns in Bootstrap.

3fill in blank

hard

Fix the error in the column class to create a left sidebar with 3 columns width.

Bootsrap

<div class="row">
  <div class="col-[1] bg-light">
    Left Sidebar
  </div>
  <div class="col bg-white">
    Main Content
  </div>
  <div class="col-3 bg-light">
    Right Sidebar
  </div>
</div>

Drag options to blanks, or click blank then click option'

A3

B4

C6

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-4 makes the sidebar wider than intended.

Using col without number makes it auto width.

The left sidebar should have col-3 to take 3 columns width in Bootstrap's 12-column grid.

4fill in blank

hard

Fill both blanks to create a main content area with 6 columns and a right sidebar with 3 columns.

Bootsrap

<div class="row">
  <div class="col-[1] bg-white">
    Main Content
  </div>
  <div class="col-[2] bg-light">
    Right Sidebar
  </div>
</div>

Drag options to blanks, or click blank then click option'

A6

B3

C4

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the column numbers between main and sidebar.

Using numbers that don't add up to 12 or less.

The main content uses col-6 for half width, and the right sidebar uses col-3 for a quarter width.

5fill in blank

hard

Fill all three blanks to create a holy grail layout with left sidebar (3 cols), main content (6 cols), and right sidebar (3 cols).

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1] bg-light">
      Left Sidebar
    </div>
    <div class="col-[2] bg-white">
      Main Content
    </div>
    <div class="col-[3] bg-light">
      Right Sidebar
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A3

B6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 4 columns for sidebars which breaks the 12-column total.

Not matching the column numbers to the layout design.

The holy grail layout uses 3 columns for left sidebar, 6 for main content, and 3 for right sidebar in Bootstrap's 12-column grid.

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