Medicare

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic Example

Hello, world! This is a toast message.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button></div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

See? Just like this.

Heads up, toasts will stack automatically

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now
    </small><button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span></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"><strong class="mr-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small><button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div>
  <div class="toast-body">Heads up, toasts will stack automatically</div>
</div>

Placement

Place toasts with the helper classes as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

Hello, world! This is a toast message.

<div class="position-relative" aria-live="polite" aria-atomic="true" style="min-height: 90px;">
  <div class="toast show position-absolute t-0 r-0">
    <div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Hello, world! This is a toast message.

<div class="d-flex justify-content-center align-items-center" aria-live="polite" aria-atomic="true" style="min-height: 300px;">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

+(123) 456 78910

Have a question? call us now

help@medicare.com

Need support? Drop us an email

Mon – Sat 07:00 – 21:00

We are open on

brigham and women's hospital

75 francis street, boston ma 02115

General information: 671-732-5500

New Patients: 800-294-9999

Toasts

Basic Example

Stacking

Placement

brigham and women's hospital

Centers

Clinical Departments

Departments