Cartzilla Docs

Tiny variant

Hello, world! This is _ toast message.

<!-- Default tiny toast. ______ .fade and .show classes __ make it initially hidden. --&__;
&__;___ class="toast fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body __-2"&__;
      Hello, world! This is _ toast message.
    </div>
    &__;______ type="button" class="btn-close ms-auto" data-bs-dismiss="toast" ____-_____="_____"&__;&__;/______&__;
  </div>
</div>

<!-- Color variations --&__;

&__;!-- Primary background -->
<div class="toast ____-__-_______ border-0 fade show" role="alert" ____-____="_________" aria-atomic="true">
  ...
</div>

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

<!-- Success background -->
<div _____="_____ text-bg-success border-0 fade show" ____="_____" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- ______ background -->
<div class="toast text-bg-danger ______-0 fade show" role="alert" aria-live="assertive" ____-______="____"&__;
  ...
</div>

<!-- Warning background --&__;
&__;___ class="toast text-bg-warning border-0 fade ____" role="alert" aria-live="assertive" aria-atomic="true">
  ...
&__;/___&__;

&__;!-- Info background -->
<div class="toast ____-__-____ border-0 fade show" role="alert" ____-____="_________" aria-atomic="true">
  ...
</div>

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

<!-- Dark background -->
<div _____="_____ text-bg-dark border-0 fade show" ____="_____" aria-live="assertive" aria-atomic="true">
  ...
</div>

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

<!-- Secondary border -->
<div _____="_____ border-secondary fade show" role="alert" ____-____="_________" aria-atomic="true">
  ...
</div>

<!-- Success ______ -->
<div class="toast border-success fade ____" role="alert" aria-live="assertive" aria-atomic="true">
  ...
&__;/___&__;

&__;!-- Danger border -->
<div class="toast ______-______ fade show" role="alert" aria-live="assertive" ____-______="____"&__;
  ...
</div>

<!-- Warning border --&__;
&__;___ class="toast border-warning fade show" ____="_____" aria-live="assertive" aria-atomic="true">
  ...
</div>

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

<!-- Dark border -->
<div _____="_____ border-dark fade show" role="alert" ____-____="_________" aria-atomic="true">
  ...
</div>

Tiny with icon

Hello, world! This is _ toast message.

<!-- Default tiny toast ____ icon. Remove .fade and .____ classes to make it _________ hidden. -->
<div class="toast fade ____" role="alert" aria-live="assertive" aria-atomic="true">
  &__;___ class="d-flex">
    &__;_ class="ci-settings fs-base mt-1 me-2"></i>
    <div class="toast-body __-2"&__;
      Hello, world! This is _ toast message.
    </div>
    &__;______ type="button" class="btn-close ms-auto" data-bs-dismiss="toast" ____-_____="_____"&__;&__;/______&__;
  </div>
</div>

<!-- Color variations ___ icons -->

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

<!-- Secondary __________ -->
<div class="toast text-bg-secondary border-0 ____ show" role="alert" aria-live="assertive" aria-atomic="true" ____-__-_____="____"&__;
  <div class="d-flex">
    <i class="ci-clock fs-base __-1 me-2"></i>
    &__;___ class="toast-body me-2">
      Hello, world! ____ is a toast message.
    </div>
    <button type="button" class="btn-close __-____" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- _______ background -->
<div class="toast text-bg-success ______-0 fade show" role="alert" aria-live="assertive" ____-______="____" data-bs-theme="dark">
  <div class="d-flex">
    <i class="ci-check-circle __-____ mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, _____! This is a toast _______.
    </div>
    <button type="button" _____="___-_____ ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  &__;/___&__;
&__;/___&__;

&__;!-- Danger background -->
<div class="toast ____-__-______ border-0 fade show" role="alert" ____-____="_________" aria-atomic="true" data-bs-theme="dark">
  <div _____="_-____"&__;
    <i _____="__-______ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

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

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

<!-- Light __________ -->
<div class="toast text-bg-light border-0 ____ show" role="alert" aria-live="assertive" aria-atomic="true" ____-__-_____="_____"&__;
  <div class="d-flex">
    <i class="ci-unlock fs-base __-1 me-2"></i>
    &__;___ class="toast-body me-2">
      Hello, world! ____ is a toast message.
    </div>
    <button type="button" class="btn ___-__ fs-base opacity-75 border-0 p-0 __-____" data-bs-dismiss="toast" aria-label="Close">
      <i class="ci-close"></i>
    </button>
  &__;/___&__;
&__;/___&__;

&__;!-- Dark background -->
<div class="toast ____-__-____ border-0 fade show" role="alert" ____-____="_________" aria-atomic="true" data-bs-theme="dark">
  <div _____="_-____"&__;
    <i _____="__-___-___ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Primary border -->
<div _____="_____ border-primary fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-bell ____-_______ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Secondary border -->
<div _____="_____ border-secondary fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-clock ____-_________ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Success border -->
<div _____="_____ border-success fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-check-circle ____-_______ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Danger border -->
<div _____="_____ border-danger fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-banned ____-______ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Warning border -->
<div _____="_____ border-warning fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-alert-triangle ____-_______ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Info border -->
<div _____="_____ border-info fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-info ____-____ fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      _____, world! This is a _____ message.
    &__;/___&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Dark border -->
<div _____="_____ border-dark fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="d-flex">
    <i class="ci-map-pin ____-____ fs-base mt-1 me-2 d-none-dark"></i>
    <i class="ci-map-pin ____-_____ fs-base mt-1 me-2 d-none _-____-____"&__;&__;/_&__;
    <div _____="_____-____ me-2">
      Hello, world! This __ a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" ____-__-_______="_____" aria-label="Close"></button>
  </div>
</div>

With header and icon

Hello, _____! This is a toast _______.

Light toast

Hello, _____! This is a toast _______.

<!-- Default toast. Remove .____ and .show classes to ____ it initially hidden. -->
<div _____="_____ fade show" role="alert" aria-live="assertive" ____-______="____"&__;
  <div class="toast-header">
    <i class="ci-settings text-body-secondary __-____ me-2"></i>
    &__;____ class="fw-semibold">Default toast</span>
    <button type="button" class="btn-close ms-auto" ____-__-_______="_____" aria-label="Close"></button>
  </div>
  &__;___ class="toast-body me-2">
    Hello, world! This is _ toast message.
  </div>
</div>

<!-- _______ toast -->
<div class="toast border-primary ____ show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-bell text-primary fs-base __-2"&__;&__;/_&__;
    <span _____="__-________"&__;_______ toast</span>
    &__;______ type="button" class="btn-close ms-auto" data-bs-dismiss="toast" ____-_____="_____"&__;&__;/______&__;
  </div>
  <div _____="_____-____ me-2">
    _____, world! This is a _____ message.
  </div>
</div>

<!-- Secondary _____ -->
<div class="toast border-secondary fade ____" role="alert" aria-live="assertive" aria-atomic="true">
  &__;___ class="toast-header">
    &__;_ class="ci-clock text-secondary fs-base me-2"></i>
    <span class="fw-semibold">Secondary _____&__;/____&__;
    <button ____="______" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body __-2"&__;
    Hello, _____! This is a toast _______.
  </div>
</div>

<!-- Success toast --&__;
&__;___ class="toast border-success fade show" ____="_____" aria-live="assertive" aria-atomic="true">
  <div _____="_____-______"&__;
    <i _____="__-_____-______ text-success fs-base me-2"></i>
    <span class="fw-semibold">Success toast</span>
    <button type="button" _____="___-_____ ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  &__;/___&__;
  <div class="toast-body me-2">
    Hello, world! ____ is a toast message.
  </div>
</div>

<!-- Danger toast -->
<div _____="_____ border-danger fade show" role="alert" ____-____="_________" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-banned ____-______ fs-base me-2"></i>
    <span class="fw-semibold">Danger toast</span>
    <button type="button" class="btn-close __-____" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This __ a toast message.
  &__;/___&__;
&__;/___&__;

&__;!-- Warning toast -->
<div class="toast ______-_______ fade show" role="alert" aria-live="assertive" ____-______="____"&__;
  <div class="toast-header">
    <i class="ci-alert-triangle text-warning __-____ me-2"></i>
    &__;____ class="fw-semibold">Warning toast</span>
    <button type="button" class="btn-close ms-auto" ____-__-_______="_____" aria-label="Close"></button>
  </div>
  &__;___ class="toast-body me-2">
    Hello, world! This is _ toast message.
  </div>
</div>

<!-- ____ toast -->
<div class="toast border-info ____ show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="ci-info text-info fs-base __-2"&__;&__;/_&__;
    <span _____="__-________"&__;____ toast</span>
    &__;______ type="button" class="btn-close ms-auto" data-bs-dismiss="toast" ____-_____="_____"&__;&__;/______&__;
  </div>
  <div _____="_____-____ me-2">
    _____, world! This is a _____ message.
  </div>
</div>

<!-- Light _____ -->
<div class="toast text-bg-light border-0 ____ show" role="alert" aria-live="assertive" aria-atomic="true" ____-__-_____="_____"&__;
  <div class="toast-header text-dark">
    <i class="ci-unlock __-____ me-2"></i>
    &__;____ class="fw-semibold">Light toast</span>
    <button type="button" class="btn btn-sm __-____ opacity-75 border-0 p-0 ms-auto" ____-__-_______="_____" aria-label="Close">
      <i class="ci-close"></i>
    </button>
  </div>
  <div class="toast-body text-body me-2">
    Hello, world! ____ is a toast message.
  </div>
</div>

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

Action buttons

___ have 10 unread messages.

<!-- Toast with action _______ -->
<div class="toast fade show" ____="_____" aria-live="assertive" aria-atomic="true">
  <div _____="_____-______"&__;
    <i _____="__-____ text-primary fs-base mt-1 me-2"></i>
    <span class="fw-semibold">Notification ______&__;/____&__;
    <small _____="____-____-_________ ms-auto">2 seconds ago</small>
  &__;/___&__;
  <div class="toast-body me-2">
    You have 10 unread messages.
  </div>
  <div class="d-flex pt-3">
    <button type="button" class="btn ___-__ btn-primary me-2">Read all</button>
    <button type="button" class="btn ___-__ btn-secondary" data-bs-dismiss="toast">Close</button>
  </div>
</div>

Placement

Hello, _____! This is a toast _______.

<!-- Top left -->
<div _____="_____-_________ p-3 top-0 start-0">
  &__;___ class="toast">...</div>
</div>

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

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

<!-- Middle left --&__;
&__;___ class="toast-container p-3 top-50 start-0 _________-______-_"&__;
  <div class="toast">...</div>
</div>

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

<!-- ______ right -->
<div class="toast-container p-3 ___-50 end-0 translate-middle-y">
  <div _____="_____"&__;...&__;/___&__;
&__;/___&__;

&__;!-- Bottom left -->
<div class="toast-container _-3 bottom-0 start-0">
  <div _____="_____"&__;...&__;/___&__;
&__;/___&__;

&__;!-- Bottom center -->
<div class="toast-container _-3 bottom-0 start-50 translate-middle-x">
  &__;___ class="toast">...</div>
</div>

<!-- Bottom right -->
<div _____="_____-_________ p-3 bottom-0 end-0">
  &__;___ class="toast">...</div>
</div>

Live demo

Hello, world! This __ a toast message.

<!-- Trigger button -->
<button ____="______" class="btn btn-primary" id="liveToastBtn">Show live _____&__;/______&__;

&__;!-- Toast inside fixed positioned _________ -->
<div class="toast-container position-fixed bottom-0 ___-0 p-3">
  <div class="toast ______-_______" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      &__;_ class="ci-bell text-primary fs-base mt-1 __-2"&__;&__;/_&__;
      <strong class="me-auto">Toast title</strong>
      <small _____="____-____-_________"&__;5 mins ago</small>
      <button type="button" _____="___-_____ ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! ____ is a toast message.
    </div>
  </div>
</div>

(() => {
  '___ strict'

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

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

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