Skip to content

Elements:Toasts

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position.

NOTE: Toasts are opt-in for performance reasons, so you must initialize them yourself. Full Javascript/toggle functionality will be added as part of the AppStrap Admin Theme coming very soon!

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 w-10" alt="...">
    <strong class="me-auto">Bootstrap</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>

Coloured

<div class="toast show bg-primary bg-op-1 text-primary" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body fw-bold"> Hello, world! This is a toast message. </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Translucent

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 img-fluid w-10" alt="Toast image">
    <strong class="me-auto">Bootstrap</strong> 
    <small class="text-muted">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>

Stacking

<div class="toast-container">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 img-fluid w-10" alt="Toast image">
      <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="Close"></button>
    </div>
    <div class="toast-body"> See? Just like this. </div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 img-fluid w-10" alt="Toast image">
      <strong class="me-auto">Bootstrap</strong> 
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body"> Heads up, toasts will stack automatically </div>
  </div>
</div>

Placement

The position utilities (elements-spacers.html) to position toasts as you please.

<div aria-live="polite" aria-atomic="true" class="position-relative bg-dark p-4" style="min-height: 300px">
  <!-- Position it -->
  <div class="toast-container position-absolute top-0 end-0 m-3">
    <!-- Then put toasts within -->
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 img-fluid w-10" alt="Toast image">
        <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="Close"></button>
      </div>
      <div class="toast-body"> See? Just like this. </div>
    </div>
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="./assets/img/index-app/avatar.jpg" class="rounded me-2 img-fluid w-10" alt="Toast image">
        <strong class="me-auto">Bootstrap</strong> 
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body"> Heads up, toasts will stack automatically </div>
    </div>
  </div>
</div>

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.


Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page