Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultDelayAutohideAnimationTranslucentStackingCustom content

Toasts

Default

Delay = 5000 ms, auto-hide = true, animation = true

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast header</strong>
    <small>9 minutes ago</small>
  </div>
  <div class="toast-body">Toast body text goes here.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> </div> <div class="toast-body">Toast body text goes here.</div> </div>

Delay

Delay = 3000 ms, auto-hide = true, animation = true

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
  <div class="toast-header">
    <strong class="me-auto">Toast header</strong>
    <small>9 minutes ago</small>
  </div>
  <div class="toast-body">Toast body text goes here.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> </div> <div class="toast-body">Toast body text goes here.</div> </div>

Autohide

Delay = 5000 ms, auto-hide = false, animation = true

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">Toast header</strong>
    <small>9 minutes ago</small>
    <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Toast body text goes here.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body">Toast body text goes here.</div> </div>

Animation

Delay = 5000 ms, auto-hide = false, animation = false

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-animation="false">
  <div class="toast-header">
    <strong class="me-auto">Toast header</strong>
    <small>9 minutes ago</small>
    <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Toast body text goes here.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-animation="false"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body">Toast body text goes here.</div> </div>

Translucent

<div class="bg-dark p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
    <div class="toast-header">
      <strong class="me-auto">Toast header</strong>
      <small>9 minutes ago</small>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Toast body text goes here.</div>
  </div>
</div>
<div class="bg-dark p-3"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body">Toast body text goes here.</div> </div> </div>

Stacking

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
    <div class="toast-header">
      <strong class="me-auto">Toast header</strong>
      <small>9 minutes ago</small>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Toast body text goes here.</div>
  </div>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
    <div class="toast-header">
      <strong class="me-auto">Toast header</strong>
      <small>9 minutes ago</small>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Toast body text goes here.</div>
  </div>
</div>
<div class="toast-container"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body">Toast body text goes here.</div> </div> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"> <div class="toast-header"> <strong class="me-auto">Toast header</strong> <small>9 minutes ago</small> <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body">Toast body text goes here.</div> </div> </div>

Custom content

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  <div class="toast-body">
    Toast body text goes here.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"> <div class="toast-body"> Toast body text goes here. <div class="mt-2 pt-2 border-top"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button> </div> </div> </div>

Alignment and placement

Position utilities (single toast)

Position utilities (multiple toasts)

Flex utilities