Default Toast

Ra-admin

Hello, world! This is a toast message.

Custom Content Toast

Hello, world! This is a toast message.

Take action Close

Color Schemes Toast

Hello, world! This is a toast message.

Hello, world! This is a toast message.

<div class="card">
  <div class="card-header">
    <h5>Bootstrap Toasts</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-4">
        <h6 class="mb-3">Default Toast</h6>
        <div class="toast d-block border-primary border-opacity-25 bg-light-primary" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header border-primary border-opacity-25 bg-light-primary">
            <img src="/images/logo/3.png" class="rounded me-2 h-30 w-30 b-r-4 " alt="">
            <strong class="me-auto">Ra-admin</strong>
            <small>11 mins ago</small>
            <div class="bg-primary pt-1 ms-2 b-r-8">
              <button type="button" class="btn-close m-0 p-2 pt-0 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
          <div class="toast-body border-primary border-opacity-25">
            Hello, world! This is a toast message.
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <h6 class="mb-3">Custom Content Toast</h6>
        <div class="toast d-block" 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-primary ">Take action</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="toast">Close</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <h6 class="mb-3">Color Schemes Toast</h6>
        <div class="toast d-block align-items-center bg-primary border-0 mb-3" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast d-block align-items-center bg-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Placement Toasts</h5>
  </div>
  <div class="card-body">
    <button type="button" class="btn btn-light-primary" id="toastbtn">Show Toast</button>
    <div class="toast toastbtn mt-3 bg-light-primary border-primary border-opacity-25 b-r-4">
      <div class="toast-header bg-light-primary border-primary border-opacity-25">
        <strong class="me-auto">Toast Header</strong>
        <div class="bg-primary d-flex-center b-r-8">
          <button type="button" class="btn-close m-0 p-2" data-bs-dismiss="toast"></button>
        </div>
      </div>
      <div class="toast-body">
        <p>Some text inside the toast body</p>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Position Notification</h5>
    <p>It is Very Easy to Customize and it uses in website application.</p>
  </div>
  <div class="card-body">
    <div class="app-toast-button d-flex flex-wrap gap-2">
      <button class="btn btn-light-primary toast_top" id="new-toast">Top</button>
      <button class="btn btn-light-secondary toast_center" id="center-toast">Center</button>
      <button class="btn btn-light-success toast_left" id="left-toast">Left</button>
      <button class="btn btn-light-info" id="right-toast">Right</button>
      <button class="btn btn-light-warning" id="bottom-toast">Bottom</button>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h5>Position Notification</h5>
    <p>It is Very Easy to Customize and it uses in website application.</p>
  </div>
  <div class="card-body">
    <div class="app-toast-button">
      <div class="d-flex gap-2 flex-wrap">
        <button id="app-toast-primary" class="btn btn-light-primary toast-primary" onclick="handleToast(this)">Primary</button>
        <button id="app-toast-secondary" class="btn btn-light-secondary toast-secondary" onclick="handleToast(this)">Secondary</button>
        <button id="app-toast-success" class="btn btn-light-success toast-success" onclick="handleToast(this)">Success</button>
        <button id="app-toast-danger" class="btn btn-light-danger toast-danger" onclick="handleToast(this)">Danger</button>
        <button id="app-toast-warning" class="btn btn-light-warning toast-warning" onclick="handleToast(this)">Warning</button>
        <button id="app-toast-info" class="btn btn-light-info toast-info" onclick="handleToast(this)">Info</button>
        <button id="app-toast-light" class="btn btn-light-light toast-light" onclick="handleToast(this)">Light</button>
        <button id="app-toast-dark" class="btn btn-light-dark toast-dark" onclick="handleToast(this)">Dark</button>
      </div>
      <div class="app-color-toast app-toast-primary d-none">
        <div class="toast-item">
          <div class="toast-title text-primary">
            <i class="ti ti-download f-s-22"></i> This is a Primary toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-primary"></i></div>
      </div>
      <div class="app-color-toast app-toast-secondary d-none">
        <div class="toast-item">
          <div class="toast-icon text-secondary"></div>
          <div class="toast-title text-secondary">
            <i class="ti ti-butterfly f-s-22"></i>This is a Secondary toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-secondary"></i></div>
      </div>
      <div class="app-color-toast app-toast-success d-none">
        <div class="toast-item">
          <div class="toast-icon text-success"></div>
          <div class="toast-title text-success">
            <i class="ti ti-award f-s-22"></i> This is a success toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-success"></i></div>
      </div>
      <div class="app-color-toast app-toast-danger d-none">
        <div class="toast-item">
          <div class="toast-title text-danger">
            <i class="ti ti-power f-s-22"></i> This is a Danger toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-danger"></i></div>
      </div>
      <div class="app-color-toast app-toast-warning d-none">
        <div class="toast-item">
          <div class="toast-title text-warning">
            <i class="ti ti-alert-triangle f-s-22"></i> This is a Warning toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-warning"></i></div>
      </div>
      <div class="app-color-toast app-toast-info d-none">
        <div class="toast-item">
          <div class="toast-title text-info">
            <i class="ti ti-inbox f-s-22"></i> This is a Info toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-info"></i></div>
      </div>
      <div class="app-color-toast app-toast-light d-none">
        <div class="toast-item">
          <div class="toast-title text-dark">
            <i class="ti ti-download f-s-22"></i> This is a Light toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-dark"></i></div>
      </div>
      <div class="app-color-toast app-toast-dark d-none">
        <div class="toast-item">
          <div class="toast-title text-dark">
            <i class="ti ti-world-download f-s-22"></i> This is a Dark toast message.
          </div>
          <div class="toast-line"></div>
        </div>
        <div class="toast-close"><i class="fa fa-close text-dark"></i></div>
      </div>
    </div>
  </div>
</div>