Avoiding common Bootstrap mistakes - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the Bootstrap CSS file correctly in the HTML head.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="[1]">
  <title>Bootstrap Example</title>
</head>
<body>
  <h1 class="text-primary">Hello, Bootstrap!</h1>
</body>
</html>

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

Abootstrap.min.js

Bbootstrap.bundle.min.js

Cstyle.css

Dhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Linking the JavaScript file instead of the CSS file.

Using a local file name without the correct path.

Forgetting to include the rel="stylesheet" attribute.

The Bootstrap CSS file must be linked in the <head> using the correct URL to apply styles.

2fill in blank

medium

Complete the code to create a responsive Bootstrap button with the primary color style.

Bootsrap

<button type="button" class="btn [1]">Click me</button>

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

Abtn-primary

Bbtn-danger

Cbtn-secondary

Dbtn-link

Attempts:

3 left

💡 Hint

Common Mistakes

Using only btn without a color class.

Using a color class that does not exist or is for links.

The class btn-primary styles the button with Bootstrap's primary color.

3fill in blank

hard

Fix the error in the Bootstrap grid code by completing the missing class for a column that takes half the width on medium screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="[1]">
      Content here
    </div>
  </div>
</div>

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

Acol-6

Bcol-md-6

Ccol-lg-6

Dcol-sm-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 which applies to all screen sizes, not just medium.

Using a breakpoint that does not match the requirement.

The class col-md-6 makes the column take half the width on medium screens and larger.

4fill in blank

hard

Fill both blanks to create a Bootstrap alert box with a close button that can be dismissed.

Bootsrap

<div class="alert [1] alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> You should check this.
  <button type="button" class="btn-close" data-bs-dismiss="[2]" aria-label="Close"></button>
</div>

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

Aalert-warning

Balert-success

Calert

Dalert-danger

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong alert color class that does not match the message.

Setting data-bs-dismiss to a wrong value like modal.

The alert box uses alert-warning for the yellow warning style, and the close button dismisses the alert component.

5fill in blank

hard

Fill all three blanks to create a Bootstrap navbar with a brand name, a toggle button, and a collapsible menu.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">[1]</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="[2]" data-bs-target="#[3]" aria-controls="[3]" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

AMySite

Bcollapse

CnavbarSupportedContent

Dnavbar-brand

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong toggle type like dropdown instead of collapse.

Mismatching the data-bs-target and the menu ID.

The brand name is set to MySite. The toggle button uses collapse to toggle the menu with ID navbarSupportedContent.

Practice

1. Which of the following is a common mistake when using Bootstrap buttons?

easy

A. Adding both btn and btn-primary classes together

B. Using btn-primary without the base btn class

C. Using btn class alone without any color class

D. Using btn-secondary for a secondary button

Solution

1. Step 1: Understand Bootstrap button class structure

   Bootstrap buttons require the base class btn plus a style class like btn-primary to work properly.

2. Step 2: Identify the mistake in the options

   Using btn-primary alone without btn will not style the button correctly.

3. Final Answer:

   Using btn-primary without the base btn class -> Option B

4. Quick Check:

   Always combine btn with style classes [OK]

Hint: Always include base btn class with button styles [OK]

Common Mistakes:

• Forgetting the base btn class
• Using incorrect class names
• Mixing Bootstrap 3 and 5 classes

2. Which of the following is the correct syntax to create a responsive Bootstrap grid row with three equal columns?

easy

A. <div class='row'><div class='col'>...</div><div class='col'>...</div><div class='col'>...</div></div>

B. <div class='row'><div class='col-6'>...</div><div class='col-6'>...</div><div class='col-6'>...</div></div>

C. <div class='container'><div class='col-4'>...</div><div class='col-4'>...</div><div class='col-4'>...</div></div>

D. <div class='row'><div class='col-3'>...</div><div class='col-3'>...</div><div class='col-3'>...</div></div>

Solution

1. Step 1: Recall Bootstrap grid basics

   Bootstrap grid uses rows and columns. Using col without a number divides space equally among columns.

2. Step 2: Check each option

   <div class='row'><div class='col'>...</div><div class='col'>...</div><div class='col'>...</div></div> uses col three times inside a row, which creates three equal columns responsively.

3. Final Answer:

   Using col inside a row for equal columns -> Option A

4. Quick Check:

   Equal columns = col inside row [OK]

Hint: Use col for equal columns inside a row [OK]

Common Mistakes:

• Using col-4 without a row
• Missing the row container
• Using wrong column widths that don't add to 12

3. What will be the visual result of this Bootstrap code snippet?

<div class='container'>
  <div class='row'>
    <div class='col-md-6 col-sm-12'>Left</div>
    <div class='col-md-6 col-sm-12'>Right</div>
  </div>
</div>

medium

A. Two columns side by side on medium screens and above; stacked on small screens

B. Two columns stacked on all screen sizes

C. Two columns side by side on all screen sizes

D. Only one column visible, the other hidden

Solution

1. Step 1: Understand Bootstrap responsive classes

   col-md-6 means half width on medium (≥768px) and larger screens; col-sm-12 means full width on small (≥576px) screens.

2. Step 2: Analyze layout behavior

   On medium and larger screens, columns appear side by side (each half width). On small screens, columns stack vertically (full width each).

3. Final Answer:

   Two columns side by side on medium screens and above; stacked on small screens -> Option A

4. Quick Check:

   Responsive classes control stacking vs side-by-side [OK]

Hint: Remember smaller screen classes override larger ones for stacking [OK]

Common Mistakes:

• Assuming columns always stay side by side
• Confusing col-sm and col-md breakpoints
• Not testing on different screen sizes

4. Identify the error in this Bootstrap navbar code snippet:

<nav class='navbar navbar-expand-lg'>
  <div class='container-fluid'>
    <a class='navbar-brand' href='#'>Brand</a>
    <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNav'>
      <span class='navbar-toggler-icon'></span>
    </button>
    <div class='collapse navbar-collapse' id='navbarNav'>
      <ul class='navbar-nav'>
        <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
      </ul>
    </div>
  </div>
</nav>

medium

A. Incorrect use of navbar-nav inside ul

B. Missing navbar-brand class on the brand link

C. Using data-toggle and data-target instead of data-bs-toggle and data-bs-target

D. Missing container class instead of container-fluid

Solution

1. Step 1: Check Bootstrap 5 data attribute syntax

   Bootstrap 5 changed data-toggle and data-target to data-bs-toggle and data-bs-target.

2. Step 2: Identify the error in the snippet

   The snippet uses old Bootstrap 4 attributes data-toggle and data-target, which won't work in Bootstrap 5.

3. Final Answer:

   Using data-toggle and data-target instead of data-bs-toggle and data-bs-target -> Option C

4. Quick Check:

   Bootstrap 5 requires data-bs-* attributes [OK]

Hint: Use data-bs-toggle and data-bs-target in Bootstrap 5 [OK]

Common Mistakes:

• Using Bootstrap 4 data attributes in Bootstrap 5
• Forgetting to include Bootstrap JS for toggler
• Incorrect container class usage

5. You want a Bootstrap card component that always stays centered horizontally on all screen sizes and has a maximum width of 24rem. Which combination of classes and styles avoids common mistakes?

hard

A. <div class='card' style='width: 24rem; margin: auto;'>...</div>

B. <div class='card text-center' style='width: 24rem;'>...</div>

C. <div class='card mx-auto' style='width: 24rem;'>...</div>

D. <div class='card mx-auto' style='max-width: 24rem;'>...</div>

Solution

1. Step 1: Understand horizontal centering in Bootstrap

   Using mx-auto applies automatic horizontal margins, centering the element inside its container.

2. Step 2: Use max-width for responsive sizing

   Setting max-width: 24rem; limits the card's width but allows it to shrink on smaller screens, avoiding overflow.

3. Step 3: Evaluate options

   <div class='card mx-auto' style='max-width: 24rem;'>...</div> uses mx-auto and max-width, which is the best practice to center and limit width responsively.

4. Final Answer:

   <div class='card mx-auto' style='max-width: 24rem;'>...</div> -> Option D

5. Quick Check:

   Center with mx-auto and limit width with max-width [OK]

Hint: Use mx-auto and max-width for centered responsive cards [OK]

Common Mistakes:

• Using fixed width without max-width causing overflow
• Using text-center which centers text, not the card
• Forgetting horizontal margin auto for centering