Landing page sections in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Which Bootstrap class creates a responsive two-column layout in a landing page section?

You want to create a landing page section with two columns side by side on medium and larger screens, but stacked on smaller screens. Which Bootstrap class should you use on the container holding the columns?

Bootsrap

<div class="?">
  <div class="col-md-6">Column 1</div>
  <div class="col-md-6">Column 2</div>
</div>

A container-fluid

B col-6

C d-flex

D row

💡 Hint

Think about the Bootstrap grid system and how columns are grouped.

The 'row' class groups columns and creates a horizontal layout that stacks on small screens and aligns side by side on medium and larger screens.

❓ selector

intermediate

Which Bootstrap utility class adds vertical spacing between landing page sections?

You want to add vertical space between two landing page sections using Bootstrap utility classes. Which class adds vertical margin?

Bootsrap

<section class="?">Section 1</section>
<section class="?">Section 2</section>

A mt-5

B mx-5

C pt-5

D px-5

💡 Hint

Margin top adds space above an element.

'mt-5' adds a large top margin, creating vertical space between sections.

❓ accessibility

advanced

Which attribute improves accessibility for a landing page navigation bar?

You have a navigation bar in your landing page. Which attribute should you add to the

element to help screen readers understand its purpose?

Bootsrap

<nav ?>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

A role="banner"

B aria-label="Primary navigation"

C tabindex="0"

D aria-hidden="true"

💡 Hint

Screen readers use aria-label to describe landmarks.

Adding aria-label="Primary navigation" helps screen readers identify the nav as the main navigation area.

❓ rendering

advanced

What is the visual result of using the Bootstrap class 'jumbotron' in a landing page header?

You add the class 'jumbotron' to a header section in your landing page. What will the user see?

Bootsrap

<header class="jumbotron">
  <h1>Welcome!</h1>
  <p>This is a simple hero unit.</p>
</header>

A A large padded box with gray background and bigger text

B A full-width image background with text overlay

C A small header with no padding and white background

D A fixed navigation bar at the top

💡 Hint

Jumbotron is used for highlighting important content with padding and background.

The 'jumbotron' class creates a large padded container with a light gray background and larger text to highlight content.

🧠 Conceptual

expert

How does Bootstrap's container class affect landing page responsiveness?

Which statement best describes the role of the Bootstrap 'container' class in landing page sections?

A It removes all padding and margins to allow full-width content

B It fixes the width of the content to 1200px regardless of screen size

C It centers content and adds horizontal padding that adjusts at different screen sizes

D It hides content on small screens to improve performance

💡 Hint

Think about how containers keep content neat on different devices.

The 'container' class centers content and adds horizontal padding that changes with screen size to keep layout clean and readable.

Practice

1. Which HTML tag is best to use for defining distinct sections in a Bootstrap landing page?

easy

A. <div>

B. <section>

C. <span>

D. <article>

Solution

1. Step 1: Understand semantic sectioning tags

   The <section> tag is designed to group related content into distinct parts of a page, making it ideal for landing page sections.

2. Step 2: Compare with other tags

   While

   is a generic container, it lacks semantic meaning. <span> is inline and not for sections. <article> is for self-contained content, not general sections.

3. Final Answer:

   <section> -> Option B

4. Quick Check:

   Semantic sections = <section> [OK]

Hint: Use <section> for clear, semantic page parts [OK]

Common Mistakes:

• Using <div> without semantic meaning
• Confusing <article> with <section>
• Using inline tags like <span> for layout

2. Which Bootstrap class would you use to create a responsive container for a landing page section?

easy

A. container-fluid

B. col

C. row

D. container

Solution

1. Step 1: Understand Bootstrap container classes

   The container class creates a responsive fixed-width container that adapts to screen sizes, perfect for landing page sections.

2. Step 2: Differentiate from other classes

   container-fluid spans full width always, row and col are for grid layout inside containers.

3. Final Answer:

   container -> Option D

4. Quick Check:

   Responsive fixed container = container [OK]

Hint: Use 'container' for fixed responsive width [OK]

Common Mistakes:

• Using container-fluid when fixed width is needed
• Confusing row or col as containers
• Not wrapping content in a container

3. What will be the visual result of this Bootstrap landing page section code?

<section class="container text-center py-5">
  <h1>Welcome</h1>
  <p>Your journey starts here.</p>
</section>

medium

A. Text aligned right with horizontal padding

B. Left-aligned text with no padding

C. A centered heading and paragraph with vertical padding

D. No visible content due to missing classes

Solution

1. Step 1: Analyze Bootstrap classes used

   container centers content horizontally with fixed width, text-center centers text, py-5 adds vertical padding top and bottom.

2. Step 2: Predict visual output

   The heading and paragraph will appear centered horizontally with space above and below them inside a fixed-width container.

3. Final Answer:

   A centered heading and paragraph with vertical padding -> Option C

4. Quick Check:

   text-center + py-5 = centered text with vertical padding [OK]

Hint: text-center centers text; py-5 adds vertical padding [OK]

Common Mistakes:

• Assuming text aligns left by default
• Confusing py-5 with horizontal padding
• Thinking container removes padding

4. Identify the error in this landing page section code:

<section class="container text-center py-5">
  <h2>Features</h3>
  <p>Easy to use and responsive.</p>
</section>

medium

A. Mismatched heading tags (<h2> and </h3>)

B. Missing container class

C. Incorrect use of text-center class

D. No closing section tag

Solution

1. Step 1: Check HTML tag pairs

   The heading starts with <h2> but closes with </h3>, which is invalid HTML and causes rendering errors.

2. Step 2: Verify other parts

   The container class is present, text-center is correctly used, and the section tag is properly closed.

3. Final Answer:

   Mismatched heading tags (<h2> and </h3>) -> Option A

4. Quick Check:

   Matching tags required = mismatched tags error [OK]

Hint: Match opening and closing tags exactly [OK]

Common Mistakes:

• Closing tags different from opening tags
• Forgetting to close section
• Misusing Bootstrap classes

5. You want a landing page call-to-action section with a full-width background color, centered text, and a button that scales on small screens. Which Bootstrap structure is best?

hard

A. <section class="bg-primary text-white text-center py-5"><div class="container"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section>

B. <section class="container bg-primary text-center"><h2>Join Us</h2><button class="btn btn-light">Sign Up</button></section>

C. <section class="text-center py-5"><div class="container bg-primary text-white"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section>

D. <section class="bg-primary text-white py-5"><h2 class="text-center">Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></section>

Solution

1. Step 1: Ensure full-width background color

   Applying bg-primary and padding to the <section> ensures the background color spans full width.

2. Step 2: Center text and contain content

   Using text-center on the section centers text. Wrapping content inside a container keeps it aligned and responsive.

3. Step 3: Use scalable button

   The button uses btn-lg for larger size and scales well on small screens with Bootstrap's responsive utilities.

4. Final Answer:

   Option A has all correct structure and classes -> Option A

5. Quick Check:

   Full-width bg + container + centered text + scalable button = <section class="bg-primary text-white text-center py-5"><div class="container"><h2>Join Us</h2><button class="btn btn-light btn-lg">Sign Up</button></div></section> [OK]

Hint: Put bg on section, content in container, use btn-lg for scaling [OK]

Common Mistakes:

• Putting bg-primary on container limits width
• Missing container causes content to stretch too wide
• Not using btn-lg for button size