Why consistent interactive elements matter in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap button with the primary style.

Bootsrap

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

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

Abtn-primary

Bbtn-secondary

Cbtn-danger

Dbtn-link

Attempts:

3 left

💡 Hint

Common Mistakes

Using a button class that does not exist in Bootstrap.

Forgetting to include the base class btn.

The class btn-primary gives the button the main Bootstrap blue style, making it consistent and recognizable.

2fill in blank

medium

Complete the code to create a Bootstrap alert with a success message.

Bootsrap

<div class="alert [1]" role="alert">Operation completed successfully!</div>

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

Aalert-warning

Balert-danger

Calert-success

Dalert-info

Attempts:

3 left

💡 Hint

Common Mistakes

Using an alert class that does not match the message type.

Omitting the role="alert" attribute for accessibility.

The class alert-success styles the alert with a green background, indicating success clearly and consistently.

3fill in blank

hard

Fix the error in the code to make the Bootstrap navbar toggle button work correctly.

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="[1]" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

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

Acollapse

Btab

Cmodal

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using dropdown or other toggle types that do not control the navbar collapse.

Forgetting to match data-bs-target with the collapsible element's ID.

The toggle button controls the collapsing navbar menu, so data-bs-toggle must be set to collapse.

4fill in blank

hard

Fill both blanks to create a consistent Bootstrap card with a header and body.

Bootsrap

<div class="card">
  <div class="[1]">Card Header</div>
  <div class="[2]">This is the card body content.</div>
</div>

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

Acard-header

Bcard-footer

Ccard-body

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up card-footer with the header.

Using card-title as a container instead of a text element.

The header uses card-header and the main content uses card-body to keep the card structure consistent and clear.

5fill in blank

hard

Fill all three blanks to create a consistent Bootstrap form group with label, input, and help text.

Bootsrap

<div class="mb-3">
  <label for="emailInput" class="[1]">Email address</label>
  <input type="email" class="form-control [2]" id="emailInput" aria-describedby="emailHelp">
  <div id="emailHelp" class="[3]">We'll never share your email with anyone else.</div>
</div>

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

Aform-label

Bis-invalid

Cform-text

Dform-check-input

Attempts:

3 left

💡 Hint

Common Mistakes

Using form-check-input for a text input instead of a checkbox.

Omitting the form-text class on help text.

The label uses form-label, the input uses is-invalid to show an error style, and the help text uses form-text for consistent styling.