Toast notifications in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap toast code?

Look at the following Bootstrap toast HTML snippet. What will you see rendered in the browser?

Bootsrap

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, this is a toast message!
  </div>
</div>

A A full page alert covering the entire screen with the message 'Hello, this is a toast message!'.

B Nothing visible because the toast requires JavaScript to show and the class 'show' is missing.

C A small popup box with a header 'Notification', a close button, a timestamp '11 mins ago', and the message 'Hello, this is a toast message!' visible on the page.

D Only the text 'Hello, this is a toast message!' appears without any styling or close button.

💡 Hint

Check the class 'show' and the structure of the toast component.

The 'toast' div with class 'show' makes the toast visible. The header contains the title, timestamp, and close button. The body shows the message. This creates a small popup box on the page.

📝 Syntax

intermediate

Which option correctly initializes a Bootstrap toast with JavaScript?

You want to show a Bootstrap toast using JavaScript. Which code snippet correctly creates and shows the toast?

Bootsrap

const toastEl = document.getElementById('myToast');

A const toast = new bootstrap.Toast(toastEl); toast.show();

B const toast = bootstrap.toast(toastEl); toast.display();

C const toast = new Toast(toastEl); toast.show();

D const toast = bootstrap.Toast(toastEl); toast.show();

💡 Hint

Bootstrap's JavaScript API uses 'new bootstrap.Toast(element)'.

The correct syntax is 'new bootstrap.Toast(element)' to create a toast instance, then call 'show()' to display it. Other options have wrong capitalization or method names.

❓ accessibility

advanced

Which ARIA attributes make Bootstrap toasts accessible?

Bootstrap toasts use ARIA attributes to help screen readers. Which set of attributes is correct for a toast container?

A role="dialog" aria-modal="true" aria-hidden="false"

B role="alert" aria-live="assertive" aria-atomic="true"

C role="status" aria-live="polite" aria-atomic="false"

D role="alertdialog" aria-live="off" aria-atomic="true"

💡 Hint

Toasts announce messages immediately and fully to assistive tech.

The toast container uses role="alert" to announce urgent messages, aria-live="assertive" to notify immediately, and aria-atomic="true" to read the entire message. Other options use incorrect roles or aria-live values.

❓ layout

advanced

How to position multiple Bootstrap toasts stacked at the bottom right corner?

You want multiple toasts stacked vertically at the bottom right corner of the screen. Which CSS and HTML setup achieves this?

Bootsrap

<div id="toastContainer" aria-live="polite" aria-atomic="true" class="position-fixed bottom-0 end-0 p-3">
  <!-- Toasts go here -->
</div>

A Use a container with 'position-absolute top-50 start-50 translate-middle' and place toasts inside it.

B Use a container with 'position-relative top-0 start-0 m-3' and place toasts inside it.

C Place toasts directly in body without container and add 'float-right' class to each toast.

D Use a container with classes 'position-fixed bottom-0 end-0 p-3' and place toasts inside it.

💡 Hint

Bootstrap utilities for fixed positioning and padding help place toasts.

The container with 'position-fixed bottom-0 end-0 p-3' fixes it to bottom right with padding. Toasts inside stack vertically by default. Other options place toasts elsewhere or use deprecated classes.

🧠 Conceptual

expert

What happens if you omit the 'aria-atomic' attribute on a Bootstrap toast?

Consider a toast with role="alert" and aria-live="assertive" but no aria-atomic attribute. What is the likely effect on screen readers?

A Screen readers may read only parts of the toast message, causing incomplete announcements.

B The toast will not be announced at all by screen readers.

C The toast message will be announced multiple times causing repetition.

D There is no effect; aria-atomic is optional and ignored.

💡 Hint

aria-atomic controls whether the entire region is read or only changed parts.

Without aria-atomic="true", screen readers may read only changed parts of the toast, leading to partial or confusing announcements. This attribute ensures the entire message is read at once.