Basic Alerts
Bootstrap default style
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div class="alert alert-primary alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
<strong>Welcome!</strong> Message has been sent.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
<strong>Done!</strong> Your profile photo updated.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-success alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
<strong>Success!</strong> Message has been sent.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-info alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<strong>Info!</strong> You have got 5 new email.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<strong>Warning!</strong> Something went wrong. Please check.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> Message sending failed.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this important alert message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-light alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this message..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
Solid color alerts
add .solid class to change the solid color.
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div class="alert alert-primary solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
<strong>Welcome!</strong> Message has been sent.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-secondary solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
<strong>Done!</strong> Your profile photo updated.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-success solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
<strong>Success!</strong> Message has been sent.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-info solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<strong>Info!</strong> You have got 5 new email.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-warning solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<strong>Warning!</strong> Something went wrong. Please check.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-danger solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24 " height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> Message sending failed.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-dark solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this important alert message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
<div class="alert alert-light solid alert-dismissible fade show">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this message..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
</div>
Square alerts
add .alert-square class to change the solid color.
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div class="alert alert-primary solid alert-square"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert alert-secondary solid alert-square"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert alert-success solid alert-square "><strong>Success!</strong> Message has been sent.</div>
<div class="alert alert-info solid alert-square "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert alert-warning solid alert-square "><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert alert-danger solid alert-square "><strong>Error!</strong> Message sending failed.</div>
<div class="alert alert-dark solid alert-square"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert alert-light solid alert-square"><strong>Error!</strong> You successfully read this message..</div>
Rounded alerts
add .alert-rounded class to change the solid color.
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div class="alert alert-primary solid alert-rounded"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert alert-secondary solid alert-rounded"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert alert-success solid alert-rounded "><strong>Success!</strong> Message has been sent.</div>
<div class="alert alert-info solid alert-rounded "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert alert-warning solid alert-rounded "><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert alert-danger solid alert-rounded "><strong>Error!</strong> Message sending failed.</div>
<div class="alert alert-dark solid alert-rounded"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert alert-light solid alert-rounded"><strong>Error!</strong> You successfully read this message..</div>
Dismissable Alerts
Bootstrap default style
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Alerts alt
add .alert-alt class to change the solid color.
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div class="alert alert-primary alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible alert-alt fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Solid Alt
add .alert-alt.solid class to change the solid color.
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div class="alert alert-primary alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible alert-alt solid fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Dismissable with solid
add .solid class to change the solid color.
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div class="alert alert-primary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Alert with Link
Bootstrap default style
WOW! Eveything looks OK.
Please check this one as well
WOW! Eveything looks OK.
Please check this one as well
WOW! Eveything looks OK.
Please check this one as well
Hey! Take a quick look.
My birthday party
Warning! Why you did it to me! Check this out
Error! Something Went wrong Click here for details.
Error! Something Went wrong Click here for details.
Error! Something Went wrong Click here for details.
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
well</a>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
well</a>
</div>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
well</a>
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Hey! Take a quick look.</strong> <a href="#">My birthday party</a>
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Why you did it to me! <a href="#">Check this out</a>
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>
Alert with Link and solid color
add .solid class to change the solid color.
<div class="alert alert-primary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-primary ms-1">upgrade</a>
</div>
<div class="alert alert-secondary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-secondary ms-1">upgrade</a>
</div>
<div class="alert alert-success solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-success ms-1">upgrade</a>
</div>
<div class="alert alert-info solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Hey! Take a quick look. <a href="#" class="badge badge-sm light badge-info ms-1">upgrade</a>
</div>
<div class="alert alert-warning solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Why you did it to me! <a href="#" class="badge badge-sm light badge-warning ms-1">upgrade</a>
</div>
<div class="alert alert-danger solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-danger ms-1">upgrade</a>
</div>
<div class="alert alert-dark solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-dark ms-1">upgrade</a>
</div>
<div class="alert alert-light solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-light ms-1">upgrade</a>
</div>
Inline Notifications
Default inline notification
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
<div class="row">
<div class="col-xl-6">
<div class="alert alert-primary notification">
<p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="btn btn-primary btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-secondary notification">
<p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="btn btn-secondary btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-success notification">
<p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="btn btn-success btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-info notification">
<p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="btn btn-info btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-warning notification">
<p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="btn btn-warning btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-danger notification">
<p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="btn btn-danger btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-dark notification">
<p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="btn btn-dark btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-light notification">
<p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="btn btn-dark btn-sm">Confirm</button>
<button class="btn btn-link btn-sm">Cancel</button>
</div>
</div>
</div>
Alert Icon Left
add .alert-end-icon to change the style
<div class="alert alert-primary solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-account-search"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-secondary solid alert-end-icon alert-dismissible fade show">
<span><i class="icon icon-bell-53"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-success solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-check"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-info solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-email"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Info! You have got 5 new email.
</div>
<div class="alert alert-warning solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-alert"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-help"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-settings"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light solid alert-end-icon alert-dismissible fade show">
<span><i class="mdi mdi-cogs"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Alert Outline
add .alert-outline-primary,secondary,success... to change the style
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div class="alert alert-outline-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-outline-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-outline-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Success! Message has been sent.
</div>
<div class="alert alert-outline-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button> Info! You have got 5 new email.
</div>
<div class="alert alert-outline-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-outline-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Alert Social
add .alert-social .facebook,.twitter,.linkedin,.google-plus to change the style
<div class="row">
<div class="col-xl-6">
<div class="alert alert-social facebook alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-social-icon">
<span><i class="mdi mdi-facebook"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Facebook</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-social twitter alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-social-icon">
<span><i class="mdi mdi-twitter"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Twitter</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-social linkedin alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-social-icon">
<span><i class="mdi mdi-linkedin"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Linkedin</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-social google-plus alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-social-icon">
<span><i class="mdi mdi-google-plus"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Google Plus</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
Message Alert
Bootstrap default style
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="row">
<div class="col-xl-6">
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
Message Alert with Solid color
add .solid to change the style
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="row">
<div class="col-xl-6">
<div class="alert alert-primary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-secondary solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-success solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-info solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-warning solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-danger solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-dark solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-light solid alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2">Notifications</h5>
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
Alert left icon big
add .left-icon-big to change the style
<div class="row">
<div class="col-xl-6">
<div class="alert alert-primary left-icon-big alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-left-icon-big">
<span><i class="mdi mdi-email-alert"></i></span>
</div>
<div class="media-body">
<h6 class="mt-1 mb-2">Welcome to your account, Dear user!</h6>
<p class="mb-0">Please confirm your email address: email@example.com</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-warning left-icon-big alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-left-icon-big">
<span><i class="mdi mdi-help-circle-outline"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Pending!</h5>
<p class="mb-0">You message sending failed.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-success left-icon-big alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-left-icon-big">
<span><i class="mdi mdi-check-circle-outline"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Congratulations!</h5>
<p class="mb-0">You have successfully created a account.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="alert alert-danger left-icon-big alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
</button>
<div class="media">
<div class="alert-left-icon-big">
<span><i class="mdi mdi-alert"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Loading failed!</h5>
<p class="mb-0">Again upload your server</p>
</div>
</div>
</div>
</div>
</div>