Notification
Default Toast
ki-admin
Hello, world! This is a toast message.
Custom Content Toast
Hello, world! This is a toast message.
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="/diy_templates/bootstrapmb-16149/assets/images/logo/03.png"
class="rounded me-2 h-30 w-30 b-r-4 " alt="">
<strong class="me-auto">ki-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>
Toast Header
Some text inside the toast body
<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>