Landing page sections in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a header section with a Bootstrap container.

Bootsrap

<header class="[1]">
  <h1>Welcome to Our Site</h1>
</header>

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

Acontainer

Brow

Ccol

Djumbotron

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'row' instead of 'container' causes layout issues.

Using 'col' alone does not center content properly.

The container class centers content and adds horizontal padding, perfect for a header section.

2fill in blank

medium

Complete the code to add a Bootstrap navigation bar with a dark background.

Bootsrap

<nav class="navbar navbar-expand-lg [1]">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

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

Abg-white

Bbg-light

Cbg-primary

Dbg-dark

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bg-light' results in a light background, not dark.

Using 'bg-primary' changes color but not to dark.

The bg-dark class gives the navbar a dark background color.

3fill in blank

hard

Fix the error in the code to properly create a Bootstrap card with a title.

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="[1]">Card Title</h5>
  </div>
</div>

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

Acard-header

Bcard-title

Ccard-text

Dcard-footer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-header' places the text outside the card body.

Using 'card-text' styles paragraph text, not the title.

The card-title class styles the heading inside a card body correctly.

4fill in blank

hard

Fill both blanks to create a responsive Bootstrap grid with two columns.

Bootsrap

<div class="row">
  <div class="[1]">
    <p>Column 1 content</p>
  </div>
  <div class="[2]">
    <p>Column 2 content</p>
  </div>
</div>

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

Acol-md-6

Bcol-12

Ccol-sm-6

Dcol-lg-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using different column sizes causes uneven layout.

Using 'col-12' makes columns stack vertically.

Using col-md-6 for both columns splits the row into two equal halves on medium and larger screens.

5fill in blank

hard

Fill all three blanks to create a Bootstrap button group with three buttons.

Bootsrap

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn [1]">Left</button>
  <button type="button" class="btn [2]">Middle</button>
  <button type="button" class="btn [3]">Right</button>
</div>

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

Abtn-primary

Bbtn-secondary

Cbtn-success

Dbtn-danger

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same button class for all buttons makes them look identical.

Using invalid class names causes buttons to lose styling.

Using different button styles like btn-primary, btn-secondary, and btn-success shows variety in the button group.

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