Gradient Alert
Simple primary alert -check it out!
Simple secondary alert -check it out!
Simple success alert -check it out!
Simple danger alert -check it out!
Simple warning alert -check it out!
<div class="card-header d-flex justify-content-between">
<div><h5>Gradient Alert</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#gradiantalert">
</div>
</div>
<div class="card-body">
<div class="alert alert-gradient-primary" role="alert">
Simple primary alert -check it out!
</div>
<div class="alert alert-gradient-secondary" role="alert">
Simple secondary alert -check it out!
</div>
<div class="alert alert-gradient-success" role="alert">
Simple success alert -check it out!
</div>
<div class="alert alert-gradient-danger" role="alert">
Simple danger alert -check it out!
</div>
<div class="alert alert-gradient-warning" role="alert">
Simple warning alert -check it out!
</div>
</div>
Basic Alert
Simple primary alert -check it out!
Simple secondary alert -check it out!
Simple success alert -check it out!
Simple danger alert -check it out!
Simple warning alert -check it out!
<div class="card-header d-flex justify-content-between">
<div><h5>Basic Alert</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#basicAlert">
</div>
</div>
<div class="card-body">
<div class="alert alert-primary" role="alert">
Simple primary alert -check it out!
</div>
<div class="alert alert-secondary" role="alert">
Simple secondary alert -check it out!
</div>
<div class="alert alert-success" role="alert">
Simple success alert -check it out!
</div>
<div class="alert alert-danger" role="alert">
Simple danger alert -check it out!
</div>
<div class="alert alert-warning" role="alert">
Simple warning alert -check it out!
</div>
</div>
Light Alert With Link color
Light warning color alert with an example link -Check it!
Light info color alert with an example link -Check it!
Light info color alert with an example link -Check it!
Light info color alert with an example link -Check it!
<div><h5>Light Alert With Link color</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#linkcolorAlert">
</div>
<div class="card-body">
<div class="alert alert-light-warning" role="alert">
Light warning color alert with
<a href="#" class="alert-link text-decoration-underline">an example link</a>
-Check it!
</div>
<div class="alert alert-light-info" role="alert">
Light info color alert with
<a href="#" class="alert-link text-decoration-underline">an example link</a>
-Check it!
</div>
<div class="alert alert-light-danger" role="alert">
Light danger color alert with
<a href="#" class="alert-link text-decoration-underline">an example link</a>
-Check it!
</div>
<div class="alert alert-light-dark" role="alert">
Light dark color alert with
<a href="#" class="alert-link text-decoration-underline">an example link</a>
-Check it!
</div>
</div>
Alert with Outline
Outline-alert primary -check it out!
Outline-alert secondary -check it out!
Outline-alert success -check it out!
Outline-alert danger -check it out!
<div class="card-header d-flex justify-content-between">
<div><h5>Alert with Outline</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#outlineAlert">
</div>
</div>
<div class="card-body">
<div class="alert alert-outline-primary" role="alert">
Outline-alert primary -check it out!
</div>
<div class="alert alert-outline-secondary" role="alert">
Outline-alert secondary -check it out!
</div>
<div class="alert alert-outline-success" role="alert">
Outline-alert success -check it out!
</div>
<div class="alert alert-outline-danger" role="alert">
Outline-alert danger -check it out!
</div>
</div>
Alert with left slide border
Alert with left slide border - check out!
Alert with left slide border - check out!
Alert with left slide border - check out!
Alert with left slide border - check out!
Alert with left slide border - check out!
<div><h5>Alert with left slide border</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#leftborderAlert">
</div>
<div class="card-body">
<div class="alert alert-border-primary" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-warning" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-info" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-light" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-dark" role="alert">
Alert with left slide border - check out!
</div>
</div>
Alert With Icons
Light-border-primary alert With icons -check it out!
bg-info alert With icons -check it out!
bg-light-success alert With icons -check it out!
bg-outline-warning alert With icons -check it out!
<div class="alert alert-light-border-primary d-flex align-items-center justify-content-between" role="alert">
<div class="mb-0 d-flex align-items-center">
<span class="bg-light-primary h-35 w-35 d-flex-center b-r-50 box-shadow-white me-2">
<i class="ti ti-download f-s-18"></i>
</span>
<p class="mb-0">Light-border-primary alert With icons -check it out!</p>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-info d-flex align-items-center justify-content-between" role="alert">
<div class="mb-0 d-flex align-items-center">
<span class="bg-white h-35 w-35 d-flex-center b-r-50 box-shadow-white me-2">
<i class="ti ti-accessible-off-filled text-info f-s-18"></i>
</span>
<p class="mb-0">bg-info alert With icons -check it out!</p>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-light-success d-flex align-items-center justify-content-between" role="alert">
<div class="mb-0 d-flex align-items-center">
<span class="alert-light-border-success h-35 w-35 d-flex-center b-r-50 box-shadow-white me-2">
<i class="ti ti-circle-check f-s-18"></i>
</span>
<p class="mb-0">bg-light-success alert With icons -check it out!</p>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-outline-warning d-flex align-items-center justify-content-between" role="alert">
<div class="mb-0 d-flex align-items-center">
<span class="bg-outline-warning h-35 w-35 d-flex-center b-r-50 box-shadow-white me-2">
<i class="ti ti-alert-triangle f-s-18"></i>
</span>
<p class="mb-0">bg-outline-warning alert With icons -check it out!</p>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
Size Alert with icons
A simple primary alert with image—check it out!
A simple danger alert with image—check it out!
A simple success alert with image—check it out!
A simple warning alert with image—check it out!
<div class="card-header d-flex justify-content-between">
<div><h5>Size Alert with icons</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#sizeAlert">
</div>
</div>
<div class="card-body">
<div class="alert alert-light-primary d-flex align-items-center justify-content-between" role="alert">
<span class="mb-0 d-flex align-items-center">
<span class="bg-gradient-primary h-20 w-20 d-flex-center b-r-20 box-shadow-white me-2">
<i class="ti ti-user"></i>
</span>
<p class="mb-0">A simple primary alert with image—check it out!</p>
</span>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-light-danger d-flex align-items-center justify-content-between" role="alert">
<span class="mb-0 d-flex align-items-center">
<span class="bg-gradient-danger h-30 w-30 d-flex-center b-r-20 box-shadow-white me-2">
<i class="ti ti-user f-s-17"></i>
</span>
<p class="mb-0">A simple danger alert with image—check it out!</p>
</span>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-light-success d-flex align-items-center justify-content-between" role="alert">
<span class="mb-0 d-flex align-items-center">
<span class="bg-gradient-success h-40 w-40 d-flex-center b-r-20 box-shadow-white me-2">
<i class="ti ti-user f-s-20"></i>
</span>
<p class="mb-0">A simple success alert with image—check it out!</p>
</span>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-light-warning d-flex align-items-center justify-content-between" role="alert">
<span class="mb-0 d-flex align-items-center">
<span class="bg-gradient-warning h-50 w-50 d-flex-center b-r-20 box-shadow-white me-2">
<i class="ti ti-user f-s-25"></i>
</span>
<p class="mb-0">A simple warning alert with image—check it out!</p>
</span>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
</div>
Custom Alert
A new case note has been added for
James Walker
bg-primary alert With icons -check it out!
Alert with left slide border - check out!
bg-info alert With icons -check it out!
<div class="card-header d-flex justify-content-between">
<div><h5>Custom Alert</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#customeAlert">
</div>
</div>
<div class="card-body">
<div class="alert alert-light custom-alert d-flex align-items-center justify-content-between b-r-10" role="alert">
<div class="d-flex align-items-center">
<span class="bg-white h-40 w-40 d-flex-center shadow-sm b-r-10 me-2">
<i class="ti ti-world-download f-s-18"></i>
</span>
<div>
<p class="mb-0 fw-semibold">A new case note has been added for</p>
<p class="text-muted mb-0">James Walker</p>
</div>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-gradient-primary d-flex align-items-center justify-content-between b-r-100" role="alert">
<div class="d-flex align-items-center">
<i class="ti ti-info-circle f-s-18 me-2"></i>
<p class="mb-0">bg-primary alert With icons - check it out!</p>
</div>
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</div>
<div class="alert alert-border-dark d-flex justify-content-between align-items-center" role="alert">
<p class="mb-0">Alert with left slide border - check out!</p>
<span class="bg-dark b-r-50 w-30 h-30 d-flex-center">
<i class="ti ti-x" data-bs-dismiss="alert"></i>
</span>
</div>
<div class="alert alert-light-info d-flex align-items-center justify-content-between b-r-50" role="alert">
<div class="d-flex align-items-center">
<span class="bg-info h-50 w-50 d-flex-center b-r-50 me-2">
<i class="ti ti-alarm-plus f-s-22"></i>
</span>
<p class="mb-0">bg-info alert With icons - check it out!</p>
</div>
</div>
</div>
Live Alert
<div class="card-header d-flex justify-content-between">
<div><h5>Live Alert</h5></div>
<div class="form-check form-switch">
<input class="form-check-input toggle-code" type="checkbox"
data-bs-target="#liveAlert">
</div>
</div>
<div class="card-body">
<div id="liveAlert"></div>
<button class="btn btn-primary" id="liveAlertBtn" type="button">
Show live alert
</button>
</div>
