Toast notifications in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic toast container with Bootstrap.

Bootsrap

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast-container [1] p-3" style="position: absolute; top: 0; right: 0;">
    <!-- Toasts will appear here -->
  </div>
</div>

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

Atop-0 end-0

Bbottom-0 start-0

Ctop-50 start-50

Dbottom-50 end-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using bottom or center positioning classes which place the toast in unusual places.

Forgetting to add positioning classes to the container.

The class top-0 end-0 places the toast container at the top right corner, which is a common position for toast notifications.

2fill in blank

medium

Complete the code to add a toast with a header and body using Bootstrap classes.

Bootsrap

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="[1]"></button>
  </div>
  <div class="toast-body">
    Hello, this is a toast message.
  </div>
</div>

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

Aexit

Bclose

Ccancel

Ddismiss

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague or incorrect aria-labels like 'dismiss' or 'cancel'.

Leaving aria-label empty which hurts accessibility.

The aria-label for the close button should be close to clearly describe its function to screen readers.

3fill in blank

hard

Fix the error in the JavaScript code to properly initialize and show the toast.

Bootsrap

const toastEl = document.getElementById('myToast');
const toast = new bootstrap.Toast([1]);
toast.show();

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

AtoastElement

BmyToast

CtoastEl

Ddocument.getElementById('myToast')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of the element variable.

Using an undefined variable name.

The bootstrap.Toast constructor expects the DOM element, which is stored in the variable toastEl.

4fill in blank

hard

Fill both blanks to create a toast that autohides after 3 seconds.

Bootsrap

const toastEl = document.getElementById('autoToast');
const toast = new bootstrap.Toast(toastEl, { delay: [1], [2]: true });
toast.show();

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

A3000

Bautohide

CautoHide

DhideAfter

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase autoHide which is incorrect.

Setting delay to a string instead of a number.

The delay option sets the time in milliseconds (3000 ms = 3 seconds). The correct option to enable auto hiding is autohide (all lowercase).

5fill in blank

hard

Fill all three blanks to create a toast with a header, body, and a button that triggers the toast to show on click.

Bootsrap

<button type="button" class="btn btn-primary" id="showToastBtn">Show Toast</button>
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">[1]</strong>
    <small class="text-muted">[2]</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    [3]
  </div>
</div>
<script>
  const toastEl = document.getElementById('myToast');
  const toast = new bootstrap.Toast(toastEl);
  document.getElementById('showToastBtn').addEventListener('click', () => {
    toast.show();
  });
</script>

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

ANotification

Bnow

CThis is a toast message.

DAlert

Ejust now

FHello, world!

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent or unrelated text in the toast parts.

Not matching the aria-live roles with the toast content.

The toast header title is 'Notification', the small text shows 'just now' as the time, and the body contains the message 'This is a toast message.'.