Sticky footer pattern in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the footer stick to the bottom of the page using Bootstrap classes.

Bootsrap

<body class="d-flex flex-column min-vh-100">
  <main class="flex-shrink-0">
    <div class="container">
      <h1>Welcome</h1>
      <p>Content goes here.</p>
    </div>
  </main>
  <footer class="bg-light text-center text-lg-start [1]">
    <div class="text-center p-3">© 2024 Company</div>
  </footer>
</body>

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

Asticky-top

Bfixed-bottom

Cmt-auto

Dposition-absolute

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed-bottom makes the footer always visible but overlays content.

Using sticky-top sticks the footer to the top, not bottom.

The mt-auto class adds automatic top margin to the footer, pushing it to the bottom inside a flex column container.

2fill in blank

medium

Complete the code to ensure the main content area shrinks properly to allow the footer to stay at the bottom.

Bootsrap

<body class="d-flex flex-column min-vh-100">
  <main class="[1]">
    <div class="container">
      <h1>Page Title</h1>
      <p>Some content here.</p>
    </div>
  </main>
  <footer class="bg-light text-center mt-auto">
    <div class="p-3">Footer content</div>
  </footer>
</body>

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

Aflex-shrink-1

Bflex-grow-0

Cflex-shrink-0

Dflex-grow-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-grow-0 prevents main from expanding and may push footer off screen.

Using flex-shrink-1 allows main to shrink, which can cause footer to move up.

The flex-grow-1 class allows the main content to grow and fill available space, ensuring the footer stays at the bottom.

3fill in blank

hard

Fix the error in the footer class to correctly stick it to the bottom inside a flex column layout.

Bootsrap

<footer class="bg-dark text-white text-center [1]">
  <div class="p-4">Sticky footer content</div>
</footer>

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

Afixed-bottom

Bmt-auto

Csticky-bottom

Dposition-fixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed-bottom or position-fixed overlays footer on content.

sticky-bottom is not a valid Bootstrap class.

The mt-auto class pushes the footer to the bottom inside a flex column container, unlike fixed positioning which overlays content.

4fill in blank

hard

Fill both blanks to create a flex column layout with minimum viewport height and a footer that stays at the bottom.

Bootsrap

<body class="[1]">
  <main class="[2]">
    <div class="container">
      <h2>Content</h2>
      <p>Example text.</p>
    </div>
  </main>
  <footer class="bg-secondary text-white text-center mt-auto p-3">
    Footer here
  </footer>
</body>

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

Ad-flex flex-column min-vh-100

Bflex-grow-1

Cflex-shrink-0

Dd-flex flex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-shrink-0 on main prevents it from growing.

Using flex-row on body breaks vertical layout.

The body uses d-flex flex-column min-vh-100 to create a vertical flex container with full viewport height. The main uses flex-grow-1 to fill available space, pushing the footer down.

5fill in blank

hard

Fill all three blanks to create a sticky footer layout with a flex column body, main content that grows, and footer pushed to bottom.

Bootsrap

<body class="[1]">
  <main class="[2]">
    <div class="container">
      <h3>Page Content</h3>
      <p>More text here.</p>
    </div>
  </main>
  <footer class="bg-primary text-white text-center [3] p-3">
    Sticky footer
  </footer>
</body>

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

Ad-flex flex-column min-vh-100

Bflex-grow-1

Cmt-auto

Dflex-shrink-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed positioning for footer overlays content.

Not using flex-grow-1 on main causes footer to float up.

The body uses d-flex flex-column min-vh-100 for vertical flex layout with full height. The main uses flex-grow-1 to fill space. The footer uses mt-auto to push itself to the bottom.

Practice

1. What is the main purpose of a sticky footer in a web page layout?

easy

A. To make the footer disappear when scrolling down

B. To keep the footer visible at the bottom of the page on all screen sizes

C. To fix the header at the top of the page

D. To center the main content vertically

Solution

1. Step 1: Understand the sticky footer concept

   A sticky footer is designed to stay at the bottom of the page regardless of content height or screen size.

2. Step 2: Compare options with the concept

   Only To keep the footer visible at the bottom of the page on all screen sizes describes this behavior correctly; others describe unrelated features.

3. Final Answer:

   To keep the footer visible at the bottom of the page on all screen sizes -> Option B

4. Quick Check:

   Sticky footer = footer always at bottom [OK]

Hint: Sticky footer means footer stays at bottom always [OK]

Common Mistakes:

• Confusing sticky footer with fixed header
• Thinking footer hides on scroll
• Assuming footer centers content

2. Which Bootstrap utility class helps make the body a flex container for a sticky footer layout?

easy

A. d-flex flex-column min-vh-100

B. text-center bg-primary

C. container-fluid p-3

D. position-fixed bottom-0

Solution

1. Step 1: Identify flexbox classes for vertical layout

   Bootstrap's d-flex flex-column makes the body a vertical flex container, and min-vh-100 ensures full viewport height.

2. Step 2: Check other options

   Options B and C are unrelated styling classes; A fixes position but doesn't create flex layout.

3. Final Answer:

   d-flex flex-column min-vh-100 -> Option A

4. Quick Check:

   Flex column + full height = sticky footer base [OK]

Hint: Use d-flex flex-column min-vh-100 on body [OK]

Common Mistakes:

• Using position-fixed instead of flexbox
• Confusing padding or text classes with layout
• Missing min-vh-100 for full height

3. Given this HTML snippet using Bootstrap classes for sticky footer:

<body class="d-flex flex-column min-vh-100">
  <main class="flex-fill">Content</main>
  <footer class="bg-light text-center py-3">Footer</footer>
</body>

What will be the visual result in the browser?

medium

A. Footer is fixed at the top of the page

B. Footer overlaps the main content

C. Footer scrolls up and is not visible at bottom

D. Footer stays at the bottom even if content is short

Solution

1. Step 1: Analyze the flexbox layout

   The body is a vertical flex container with full viewport height. The main content uses flex-fill to fill available space.

2. Step 2: Understand footer placement

   The footer is placed after main and stays at the bottom because main fills space above it.

3. Final Answer:

   Footer stays at the bottom even if content is short -> Option D

4. Quick Check:

   Flex-fill main + footer after = sticky footer [OK]

Hint: flex-fill main pushes footer down [OK]

Common Mistakes:

• Thinking footer overlaps content
• Assuming footer scrolls away
• Confusing fixed position with flex layout

4. You wrote this code for a sticky footer:

<body class="d-flex flex-column">
  <main class="flex-fill">Content</main>
  <footer>Footer</footer>
</body>

But the footer does not stick to the bottom on short pages. What is missing?

medium

A. The container class on the main

B. The position-fixed class on the footer

C. The min-vh-100 class on the body

D. The text-center class on the footer

Solution

1. Step 1: Check body height setting

   Without min-vh-100, the body height is only as tall as content, so footer won't stick at bottom.

2. Step 2: Verify other classes

   Position-fixed fixes footer but not sticky footer pattern; container and text-center affect layout or style but not footer position.

3. Final Answer:

   The min-vh-100 class on the body -> Option C

4. Quick Check:

   Full viewport height needed for sticky footer [OK]

Hint: Add min-vh-100 to body for full height [OK]

Common Mistakes:

• Using position-fixed instead of flexbox height
• Adding container but missing height
• Confusing text alignment with layout

5. You want a sticky footer that also changes background color when the page content is very short or very tall. Which Bootstrap approach correctly combines sticky footer with responsive background color change?

<body class="d-flex flex-column min-vh-100">
  <main class="flex-fill">Content</main>
  <footer class="py-3 text-center">Footer</footer>
</body>

Which modification achieves this?

hard

A. Add bg-light for short pages and bg-dark text-white for tall pages using media queries

B. Add bg-light always and use JavaScript to toggle classes on scroll

C. Use position-fixed bottom-0 on footer and bg-primary class

D. Wrap footer in a container and add bg-success class

Solution

1. Step 1: Understand sticky footer with background color

   The sticky footer uses flexbox with full viewport height. To change background color based on page height, CSS media queries are best.

2. Step 2: Evaluate options for responsive background

   Add bg-light for short pages and bg-dark text-white for tall pages using media queries uses Bootstrap background classes with media queries to switch colors depending on viewport or content height, which is correct.

3. Step 3: Check other options

   Add bg-light always and use JavaScript to toggle classes on scroll uses JavaScript unnecessarily; C breaks sticky footer by fixing position; D only adds static background color.

4. Final Answer:

   Add bg-light for short pages and bg-dark text-white for tall pages using media queries -> Option A

5. Quick Check:

   Use media queries + Bootstrap bg classes for responsive footer [OK]

Hint: Use media queries with Bootstrap bg classes [OK]

Common Mistakes:

• Using position-fixed breaks sticky footer
• Relying on JavaScript instead of CSS
• Adding static background without responsiveness