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.

Practice

1. What is the main purpose of a toast notification in Bootstrap?

easy

A. To show brief messages without interrupting the user

B. To create a full-page modal dialog

C. To replace the navigation bar

D. To style buttons with animations

Solution

1. Step 1: Understand the role of toast notifications

   Toast notifications are small popup messages that appear temporarily to inform users without blocking their actions.

2. Step 2: Compare with other UI elements

   Unlike modals or navigation bars, toasts are brief and non-intrusive messages.

3. Final Answer:

   To show brief messages without interrupting the user -> Option A

4. Quick Check:

   Toast = brief, non-blocking message [OK]

Hint: Toasts show quick messages without stopping user actions [OK]

Common Mistakes:

• Confusing toasts with modals
• Thinking toasts replace navigation
• Assuming toasts are for styling buttons

2. Which of the following is the correct HTML structure to create a basic Bootstrap toast?

easy

A. TitleMessage

B. TitleMessage

C. TitleMessage

D. TitleMessage

Solution

1. Step 1: Identify correct Bootstrap toast markup

   The toast requires a container with class 'toast' and accessibility roles. It includes a 'toast-header' with a title and close button, and a 'toast-body' for the message.

2. Step 2: Check each option's structure

   Title

   Message

   matches Bootstrap's official toast structure with correct classes and ARIA attributes. Others use invalid tags or missing classes.

3. Final Answer:

   Option A's HTML structure is correct -> Option A

4. Quick Check:

   Bootstrap toast = div.toast + header + body + close button [OK]

Hint: Look for div.toast with toast-header and toast-body classes [OK]

Common Mistakes:

• Using non-standard tags like <toast>
• Missing aria attributes
• Incorrect class names for toast parts

3. Given this code snippet, what will happen when the page loads?

<div class='toast show' role='alert' aria-live='assertive' aria-atomic='true'>
  <div class='toast-header'>
    <strong class='me-auto'>Notice</strong>
    <button type='button' class='btn-close' data-bs-dismiss='toast' aria-label='Close'></button>
  </div>
  <div class='toast-body'>Hello, world!</div>
</div>

medium

A. The toast will appear but without the close button

B. The toast will be hidden and require JavaScript to show

C. The toast will cause a JavaScript error

D. The toast will be visible immediately on page load

Solution

1. Step 1: Understand the 'show' class effect

   Adding the 'show' class to a toast makes it visible immediately without needing JavaScript to trigger it.

2. Step 2: Check the close button presence

   The close button is included with correct classes and attributes, so it will appear and function properly.

3. Final Answer:

   The toast will be visible immediately on page load -> Option D

4. Quick Check:

   Class 'show' = visible toast [OK]

Hint: Class 'show' makes toast visible without extra code [OK]

Common Mistakes:

• Assuming toast is hidden without JS
• Thinking close button is missing
• Confusing 'show' with 'fade'

4. This code tries to show a toast but it doesn't appear. What is the likely problem?

const toastEl = document.querySelector('.toast');
const toast = new bootstrap.Toast(toastEl);
toast.show();

medium

A. The toast element is missing the required 'toast' class

B. The Bootstrap JavaScript library is not loaded

C. The toast.show() method does not exist

D. The toast element must have the 'show' class initially

Solution

1. Step 1: Check if Bootstrap JS is loaded

   The toast JavaScript API requires Bootstrap's JavaScript library to be loaded. Without it, calling new bootstrap.Toast will fail silently or cause errors.

2. Step 2: Verify other code parts

   The toast element has the correct class, and toast.show() is a valid method. The 'show' class is added by the method, so it should not be present initially.

3. Final Answer:

   The Bootstrap JavaScript library is not loaded -> Option B

4. Quick Check:

   Bootstrap JS missing = toast.show() fails [OK]

Hint: Ensure Bootstrap JS is included before using toast API [OK]

Common Mistakes:

• Forgetting to include Bootstrap JS
• Adding 'show' class manually before JS
• Misusing toast.show() method

5. You want to create a toast that automatically disappears after 3 seconds and can be paused on hover. Which Bootstrap options should you use in JavaScript?

hard

A. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds

B. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true })

C. new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause

D. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true'

Solution

1. Step 1: Identify options for auto-hide and delay

   Bootstrap's toast accepts 'delay' in milliseconds and 'autohide' boolean to control automatic disappearance.

2. Step 2: Check for pause on hover support

   Bootstrap does not have a built-in 'pauseOnHover' option in its Toast API. Pausing on hover is typically done with CSS or custom JavaScript.

3. Step 3: Evaluate each option

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause uses delay and autohide with CSS :hover pause, which is the correct approach. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true }) uses a non-existent 'pauseOnHover' option. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds disables autohide and requires manual hiding. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true' uses a non-standard data attribute.

4. Final Answer:

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause -> Option C

5. Quick Check:

   delay + autohide + CSS hover pause = auto-hide with hover pause [OK]

Hint: Use delay, autohide, and CSS :hover to pause [OK]

Common Mistakes:

• Forgetting pause on hover requires CSS or JS
• Assuming 'pauseOnHover' is a valid option
• Setting autohide false and hiding manually