<div class="bg-light p-3">
    <div class="toast-container">
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <svg class="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 class="me-auto">Bootstrap</strong>
          <small class="text-muted">just now</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          See? Just like this.
        </div>
      </div>

      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <svg class="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 class="me-auto">Bootstrap</strong>
          <small class="text-muted">2 seconds ago</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Heads up, toasts will stack automatically
        </div>
      </div>
    </div>
</div>

<div class="bg-light p-3">
    <div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <!-- 2 -->
    <div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        Hello, world! This is a toast message.
        <div class="mt-2 pt-2 border-top">
          <button type="button" class="btn btn-light-info text-info font-weight-medium btn-sm">Take action</button>
          <button type="button" class="btn btn-light-danger text-danger font-weight-medium btn-sm" data-bs-dismiss="toast">Close</button>
        </div>
      </div>
    </div>
</div>

<div class="bg-light p-3">
    <div class="toast mb-2 d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>

<div class="bg-light p-3">
    <div class="toast mb-2 d-flex align-items-center text-white bg-light-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center text-info font-weight-medium">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-light-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center text-primary font-weight-medium">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-light-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center text-danger font-weight-medium">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-light-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center text-warning font-weight-medium">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast mb-2 d-flex align-items-center text-white bg-light-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        <div class="d-flex align-items-center text-success font-weight-medium">
            <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
        </div>
      </div>
      <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>

<div class="bg-light p-3">
    <form>
      <div class="form-group mb-3">
        <label for="selectToastPlacement">Toast placement</label>
        <select class="form-select mt-2" id="selectToastPlacement">
          <option value="" selected>Select a position...</option>
          <option value="top-0 start-0">Top left</option>
          <option value="top-0 start-50 translate-middle-x">Top center</option>
          <option value="top-0 end-0">Top right</option>
          <option value="top-50 start-0 translate-middle-y">Middle left</option>
          <option value="top-50 start-50 translate-middle">Middle center</option>
          <option value="top-50 end-0 translate-middle-y">Middle right</option>
          <option value="bottom-0 start-0">Bottom left</option>
          <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
          <option value="bottom-0 end-0">Bottom right</option>
        </select>
      </div>
    </form>
    <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts" style="height: 250px;">
      <div class="toast-container position-absolute p-3" id="toastPlacement">
        <div class="toast">
          <div class="toast-header">
            <i data-feather="bar-chart-2" class="fill-white text-info feather-sm me-2"></i>
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </div>
          <div class="toast-body">
            Hello, world! This is a toast message.
          </div>
        </div>
      </div>
    </div>
</div>