Cartzilla Docs

Tiny variant

Hello, world! This is a toast message.

<!-- Default tiny toast. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Color variations -->

<!-- Primary background -->
<div class="toast text-bg-primary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Secondary background -->
<div class="toast text-bg-secondary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Success background -->
<div class="toast text-bg-success border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Danger background -->
<div class="toast text-bg-danger border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Warning background -->
<div class="toast text-bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Info background -->
<div class="toast text-bg-info border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Light background -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Dark background -->
<div class="toast text-bg-dark border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Primary border -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Secondary border -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Success border -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Danger border -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Warning border -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Info border -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Dark border -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

Tiny with icon

Hello, world! This is a toast message.

<!-- Default tiny toast with icon. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-settings fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Color variations and icons -->

<!-- Primary background -->
<div class="toast text-bg-primary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-bell fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Secondary background -->
<div class="toast text-bg-secondary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-clock fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Success background -->
<div class="toast text-bg-success border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-check-circle fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Danger background -->
<div class="toast text-bg-danger border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-banned fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Warning background -->
<div class="toast text-bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-alert-triangle fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Info background -->
<div class="toast text-bg-info border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-info fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Light background -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
  <div class="d-flex">
    <i class="ci-unlock fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn btn-sm fs-base opacity-75 border-0 p-0 ms-auto" data-bs-dismiss="toast" aria-label="Close">
      <i class="ci-close"></i>
    </button>
  </div>
</div>

<!-- Dark background -->
<div class="toast text-bg-dark border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-map-pin fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Primary border -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-bell text-primary fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Secondary border -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-clock text-secondary fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Success border -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-check-circle text-success fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Danger border -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-banned text-danger fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Warning border -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-alert-triangle text-warning fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Info border -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-info text-info fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Dark border -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-map-pin text-dark fs-base mt-1 me-2 d-none-dark"></i>
    <i class="ci-map-pin text-light fs-base mt-1 me-2 d-none d-flex-dark"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

With header and icon

Hello, world! This is a toast message.

Light toast

Hello, world! This is a toast message.

<!-- Default toast. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-settings text-body-secondary fs-base me-2"></i>
    <span class="fw-semibold">Default toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Primary toast -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-bell text-primary fs-base me-2"></i>
    <span class="fw-semibold">Primary toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Secondary toast -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-clock text-secondary fs-base me-2"></i>
    <span class="fw-semibold">Secondary toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Success toast -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-check-circle text-success fs-base me-2"></i>
    <span class="fw-semibold">Success toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Danger toast -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-banned text-danger fs-base me-2"></i>
    <span class="fw-semibold">Danger toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Warning toast -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-alert-triangle text-warning fs-base me-2"></i>
    <span class="fw-semibold">Warning toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Info toast -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-info text-info fs-base me-2"></i>
    <span class="fw-semibold">Info toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Light toast -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
  <div class="toast-header text-dark">
    <i class="ci-unlock fs-base me-2"></i>
    <span class="fw-semibold">Light toast</span>
    <button type="button" class="btn btn-sm fs-base opacity-75 border-0 p-0 ms-auto" data-bs-dismiss="toast" aria-label="Close">
      <i class="ci-close"></i>
    </button>
  </div>
  <div class="toast-body text-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Dark toast -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-map-pin text-dark fs-base me-2 d-none-dark"></i>
    <i class="ci-map-pin text-light fs-base me-2 d-none d-flex-dark"></i>
    <span class="fw-semibold">Dark toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

Action buttons

You have 10 unread messages.

<!-- Toast with action buttons -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-bell text-primary fs-base mt-1 me-2"></i>
    <span class="fw-semibold">Notification center</span>
    <small class="text-body-secondary ms-auto">2 seconds ago</small>
  </div>
  <div class="toast-body me-2">
    You have 10 unread messages.
  </div>
  <div class="d-flex pt-3">
    <button type="button" class="btn btn-sm btn-primary me-2">Read all</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="toast">Close</button>
  </div>
</div>

Placement

Hello, world! This is a toast message.

<!-- Top left -->
<div class="toast-container p-3 top-0 start-0">
  <div class="toast">...</div>
</div>

<!-- Top center -->
<div class="toast-container p-3 top-0 start-50 translate-middle-x">
  <div class="toast">...</div>
</div>

<!-- Top right -->
<div class="toast-container p-3 top-0 end-0">
  <div class="toast">...</div>
</div>

<!-- Middle left -->
<div class="toast-container p-3 top-50 start-0 translate-middle-y">
  <div class="toast">...</div>
</div>

<!-- Middle center -->
<div class="toast-container p-3 top-50 start-50 translate-middle">
  <div class="toast">...</div>
</div>

<!-- Middle right -->
<div class="toast-container p-3 top-50 end-0 translate-middle-y">
  <div class="toast">...</div>
</div>

<!-- Bottom left -->
<div class="toast-container p-3 bottom-0 start-0">
  <div class="toast">...</div>
</div>

<!-- Bottom center -->
<div class="toast-container p-3 bottom-0 start-50 translate-middle-x">
  <div class="toast">...</div>
</div>

<!-- Bottom right -->
<div class="toast-container p-3 bottom-0 end-0">
  <div class="toast">...</div>
</div>

Live demo

Hello, world! This is a toast message.

<!-- Trigger button -->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<!-- Toast inside fixed positioned container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast border-primary" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="ci-bell text-primary fs-base mt-1 me-2"></i>
      <strong class="me-auto">Toast title</strong>
      <small class="text-body-secondary">5 mins ago</small>
      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

(() => {
  'use strict'

  const toastTrigger = document.getElementById('liveToastBtn')
  const toastLiveExample = document.getElementById('liveToast')

  if (toastTrigger) {
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show()
    })
  }
})()

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla

Toasts

Tiny variant

Tiny with icon

With header and icon

Action buttons

Placement

Live demo