Documentation

HTML
Vue
Laravel
React
Tailwind
Angular
CodeIgniter

Requirements
File Structure

Basic
React

Favicon
Loading Transitions
Logo
Changing Fonts
Layout Configure
Sidebar and Header

Disable Form
Sizing
Input Group
Alternate Input
Floating Label
Alternate Float Label
Toggle Button
Validation

Tyography
Images
Tables
Figures

AOS Animation
Datepicker
Circle Progress
CounterUp
NoUiSlider
Data Table
Source & Credits
Upgrade Guide
Change Log

Toasts

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

Examples

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

<Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <Toast.Header>
        <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        <strong className="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
    </Toast.Header>
    <Toast.Body>
        Hello, world! This is a toast message.
    </Toast.Body>
</Toast>

Live

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with .hide.

<div className="bd-content">
    <Button type="button" variant="primary" id="liveToastBtn">Show live toast</Button>
</div>
<Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <Toast.Header>
        <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        <strong className="me-auto">Bootstrap</strong>
        <small className="text-muted">11 mins ago</small>
    </Toast.Header>
    <Toast.Body>
        Hello, world! This is a toast message.
    </Toast.Body>
</Toast>

Translucent

<Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <Toast.Header>
        <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        <strong className="me-auto">Bootstrap</strong>
        <small className="text-muted">11 mins ago</small>
    </Toast.Header>
    <Toast.Body>
        Hello, world! This is a toast message.
    </Toast.Body>
 </Toast>

Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

<ToastContainer>
<Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <Toast.Header>
        <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        <strong className="me-auto">Bootstrap</strong>
        <small className="text-muted">just now</small>
    </Toast.Header>
    <div className="toast-body">
        See? Just like this.
    </div>
    </Toast>
    <Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <Toast.Header>
            <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
            <strong className="me-auto">Bootstrap</strong>
            <small className="text-muted">2 seconds ago</small>
        </Toast.Header>
        <div className="toast-body">
            Heads up, toasts will stack automatically
        </div>      
    </Toast>
</ToastContainer>

Custom content

<Toast className="align-items-center fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div className="d-flex">
        <Toast.Body>
            Hello, world! This is a toast message.
        </Toast.Body>
        <Button type="button" variant="close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></Button>
    </div>
</Toast>

Alternatively, you can also add additional controls and components to toasts.

<Toast className="fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <Toast.Body>
        Hello, world! This is a toast message.
        <div className="mt-2 pt-2 border-top">
            <Button type="button" variant="btn-primary btn-sm">Take action</Button>{' '}
            <Button type="button" variant="btn-secondary btn-sm" data-bs-dismiss="toast">Close</Button>{' '}
        </div>
    </Toast.Body>
</Toast>

Color schemes

Building on the above example, you can create different toast color schemes with our color and background utilities.

<Toast className="align-items-center text-white bg-primary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div className="d-flex">
        <Toast.Body>
            Hello, world! This is a toast message.
        </Toast.Body>
        <Button type="button" variant="close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></Button>
    </div>
</Toast>

Placement

<Form>
  <div className="mb-3">
      <label htmlFor="selectToastPlacement">Toast placement</label>
      <Form.Select  className="mt-2" id="selectToastPlacement">
          <option defaultValue="">Select a position...</option>
          <option value="">Top left</option>
          <option value="">Top center</option>
          <option value="">Top right</option>
          <option value="">Middle left</option>
          <option value="">Middle center</option>
          <option value="">Middle right</option>
          <option value="">Bottom left</option>
          <option value="">Bottom center</option>
          <option value="">Bottom right</option>
      </Form.Select>
  </div>
</Form>
<div className=" bg-dark position-relative bd-example-toasts">
  <ToastContainer className="position-absolute p-3" id="toastPlacement">
      <Toast className="fade show">
          <div className="toast-header">
              <svg className="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
              <strong className="me-auto">Bootstrap</strong>
              <small>11 mins ago</small>
          </div>
          <Toast.Body>
               Hello, world! This is a toast message.
          </Toast.Body>
      </Toast>
  </ToastContainer>
</div>

For systems that generate more notifications, consider using a wrapping element so they can easily stack.