Toasts

Use toasts to indicate messages

Default

The following example is the basic pagination style for Pixel:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fab fa-bootstrap me-2"></span>
    <strong class="me-auto">Themesberg</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, world! This is a toast message.
  </div>
</div>

Dark

You can also use the .bg-primary or .bg-secondary modifier classes to update the colors:

<div class="toast bg-primary mb-3" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fab fa-bootstrap me-2"></span>
    <strong class="me-auto">Themesberg</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 text-white">
    Hello, world! This is a toast message.
  </div>
</div>
<div class="toast bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fab fa-bootstrap me-2"></span>
    <strong class="me-auto">Themesberg</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 text-white">
    Hello, world! This is a toast message.
  </div>
</div>