Toasts
Default
Delay = 5000 ms, auto-hide = true, animation = true
Toast header
9 minutes ago
Toast body text goes here.
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
</div>
<div>Toast body text goes here.</div>
</div><div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
</div>
<div>Toast body text goes here.</div>
</div>
Delay
Delay = 3000 ms, auto-hide = true, animation = true
Toast header
9 minutes ago
Toast body text goes here.
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
</div>
<div>Toast body text goes here.</div>
</div><div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
</div>
<div>Toast body text goes here.</div>
</div>
Autohide
Delay = 5000 ms, auto-hide = false, animation = true
Toast header
9 minutes ago
Toast body text goes here.
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div><div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
Animation
Delay = 5000 ms, auto-hide = false, animation = false
Toast header
9 minutes ago
Toast body text goes here.
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div><div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
Translucent
Toast header
9 minutes ago
Toast body text goes here.
<div class="bg-dark p-3">
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
</div><div class="bg-dark p-3">
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
</div>
Stacking
Toast header
9 minutes ago
Toast body text goes here.
Toast header
9 minutes ago
Toast body text goes here.
<div>
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
</div><div>
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
<div>
<div>
<strong class="me-auto">Toast header</strong>
<small>9 minutes ago</small>
<button type="button" class="btn-close ms-2 mb-1" aria-label="Close"></button>
</div>
<div>Toast body text goes here.</div>
</div>
</div>
Custom content
Toast body text goes here.
<div>
<div>
Toast body text goes here.
<div>
<button type="button">Action</button>
<button type="button">Close</button>
</div>
</div>
</div><div>
<div>
Toast body text goes here.
<div>
<button type="button">Action</button>
<button type="button">Close</button>
</div>
</div>
</div>