Dismissible alerts in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap dismissible alert?

Look at the following HTML code using Bootstrap 5. What will you see in the browser?

Bootsrap

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This is a dismissible alert.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

A A yellow alert box with no close button visible.

B A red alert box with bold text 'Warning!' and a close button that does nothing when clicked.

C A yellow alert box with bold text 'Warning!' and a close button on the right side that can hide the alert when clicked.

D A green alert box with bold text 'Warning!' and a close button that reloads the page when clicked.

💡 Hint

Remember that 'alert-warning' gives a yellow background and 'btn-close' creates a functional close button.

The 'alert-warning' class styles the alert with a yellow background. The 'alert-dismissible' and 'btn-close' together create a close button that hides the alert when clicked. The 'fade show' classes add a smooth fade effect.

📝 Syntax

intermediate

Which option correctly adds a dismissible alert with a close button in Bootstrap 5?

Choose the correct HTML snippet that creates a dismissible alert with a close button that works.

A

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

B

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

C

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

D

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
</div>

💡 Hint

Bootstrap 5 uses 'btn-close' and 'data-bs-dismiss' attributes for dismissible alerts.

Option A uses the correct class 'btn-close' and the correct attribute 'data-bs-dismiss="alert"' which Bootstrap 5 requires for the close button to work. Other options use outdated or incorrect classes or attributes.

❓ accessibility

advanced

Which attribute improves accessibility for the dismiss button in a Bootstrap alert?

What attribute should be added to the close button to help screen readers understand its purpose?

A aria-hidden="true"

B aria-label="Close"

C role="button"

D tabindex="-1"

💡 Hint

Think about what label a screen reader needs to announce the button's function.

The 'aria-label="Close"' attribute tells screen readers that the button is for closing the alert. 'role="button"' is redundant because the element is already a button. 'tabindex="-1"' removes the button from keyboard navigation, which is bad. 'aria-hidden="true"' hides the button from screen readers, which is also bad.

❓ selector

advanced

Which CSS selector targets only the close button inside a Bootstrap dismissible alert?

Choose the CSS selector that selects the close button inside alerts with class 'alert-dismissible'.

A .alert-dismissible .btn-close

B .alert-dismissible > .btn-close

C .btn-close.alert-dismissible

D button.btn-close.alert-dismissible

💡 Hint

Remember the difference between direct child (>) and any descendant (space).

Option A selects any element with class 'btn-close' inside any descendant of '.alert-dismissible', which matches the close button inside the alert. Option A only selects direct children, which may fail if the button is nested. Options C and D look for elements with both classes on the same element, which is not the case.

🧠 Conceptual

expert

What happens if you omit the 'data-bs-dismiss="alert"' attribute on the close button in a Bootstrap dismissible alert?

Consider a dismissible alert with a close button that lacks the 'data-bs-dismiss="alert"' attribute. What is the result when the button is clicked?

A The alert will close but with a delay of 5 seconds.

B The alert will close normally because the button's class 'btn-close' is enough to trigger dismissal.

C Clicking the button will reload the page because the attribute is missing.

D The alert will not close because Bootstrap's JavaScript listens for 'data-bs-dismiss="alert"' to trigger hiding.

💡 Hint

Bootstrap's JavaScript uses specific attributes to know which elements trigger actions.

Bootstrap's JavaScript requires the 'data-bs-dismiss="alert"' attribute on the button to know it should hide the alert. Without it, clicking the button does nothing even if it looks like a close button.

Practice

1. What is the main purpose of a dismissible alert in Bootstrap?

easy

A. To make alerts appear with animation only

B. To allow users to close alert messages and keep the page clean

C. To change the alert color automatically

D. To disable all alerts on the page

Solution

1. Step 1: Understand the role of dismissible alerts

   Dismissible alerts let users close alert messages so the page looks tidy and less cluttered.

2. Step 2: Compare options with this purpose

   Only To allow users to close alert messages and keep the page clean describes this purpose correctly; others describe unrelated features.

3. Final Answer:

   To allow users to close alert messages and keep the page clean -> Option B

4. Quick Check:

   Dismissible alerts = user can close alerts [OK]

Hint: Dismissible means user can close it [OK]

Common Mistakes:

• Thinking dismissible changes alert color
• Confusing dismissible with animation only
• Believing dismissible disables alerts

2. Which of the following is the correct Bootstrap class to make an alert dismissible?

easy

A. alert alert-dismissible

B. alert dismissible-alert

C. alert dismiss-alert

D. alert closeable

Solution

1. Step 1: Recall Bootstrap's dismissible alert class

   The official class to make an alert dismissible is alert-dismissible combined with alert.

2. Step 2: Check each option

   Only alert alert-dismissible uses the correct class names exactly as Bootstrap requires.

3. Final Answer:

   alert alert-dismissible -> Option A

4. Quick Check:

   Dismissible alert class = alert-dismissible [OK]

Hint: Look for exact class name alert-dismissible [OK]

Common Mistakes:

• Using incorrect class names like dismissible-alert
• Missing the alert class
• Using non-Bootstrap class names

3. What will happen when the close button inside this alert is clicked?

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Check your input.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

medium

A. The alert will reload the page

B. Nothing will happen because the button is missing JavaScript

C. The alert text will change to 'Closed!'

D. The alert will fade out and disappear from the page

Solution

1. Step 1: Understand the alert structure and classes

   The alert uses alert-dismissible, fade, and show classes with a close button having data-bs-dismiss="alert".

2. Step 2: Know Bootstrap's behavior on close button click

   Clicking the button triggers Bootstrap's JavaScript to fade out and remove the alert from the page.

3. Final Answer:

   The alert will fade out and disappear from the page -> Option D

4. Quick Check:

   Close button with data-bs-dismiss = alert hides alert [OK]

Hint: Close button with data-bs-dismiss hides alert [OK]

Common Mistakes:

• Thinking alert text changes on close
• Assuming no effect without extra JS code
• Believing page reloads on close

4. Identify the error in this dismissible alert code:

<div class="alert alert-success alert-dismissible" role="alert">
  Success! Your form was submitted.
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

medium

A. The alert should not have alert-dismissible class

B. Alert is missing the fade class

C. Missing data-bs-dismiss="alert" on the close button

D. The button type should be submit

Solution

1. Step 1: Check the close button attributes

   The close button must have data-bs-dismiss="alert" to trigger alert dismissal.

2. Step 2: Verify other classes and attributes

   The alert-dismissible class is correct, fade is optional, and button type should be button, not submit.

3. Final Answer:

   Missing data-bs-dismiss="alert" on the close button -> Option C

4. Quick Check:

   Close button needs data-bs-dismiss attribute [OK]

Hint: Close button must have data-bs-dismiss="alert" [OK]

Common Mistakes:

• Forgetting data-bs-dismiss attribute
• Thinking fade class is mandatory
• Using wrong button type

5. You want to create a dismissible alert that automatically disappears after 5 seconds but also allows manual close. Which approach is correct?

hard

A. Use a dismissible alert with btn-close and add JavaScript to remove it after 5 seconds

B. Add data-bs-auto-dismiss="5000" attribute to the alert div

C. Use only fade and show classes without close button

D. Set the alert class to alert-auto-close and no JavaScript needed

Solution

1. Step 1: Understand Bootstrap's dismissible alert features

   Bootstrap does not provide automatic dismiss with a data attribute; manual close requires btn-close and data-bs-dismiss="alert".

2. Step 2: Implement auto-dismiss with JavaScript

   To auto-remove after 5 seconds, add JavaScript code that removes the alert element after a timeout, while keeping manual close button.

3. Final Answer:

   Use a dismissible alert with btn-close and add JavaScript to remove it after 5 seconds -> Option A

4. Quick Check:

   Auto-dismiss needs JS plus dismissible alert [OK]

Hint: Auto-dismiss requires JS plus dismissible alert [OK]

Common Mistakes:

• Assuming data-bs-auto-dismiss exists
• Omitting the close button for manual close
• Using non-existent alert-auto-close class