Default Alerts
Primary! Lorem Ipsum is simply dummy text of the printing.
Warning! Lorem Ipsum is simply dummy text of the printing.
Success! Lorem Ipsum is simply dummy text of the printing.
Info! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.
<div class="alert alert-light-primary alert-dismissible fade show border-0 mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.</button> </div>
Outline Alerts
Primary! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.
<div class="alert alert-outline-primary alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing. </div>
Solid Alerts
Warning! Lorem Ipsum is simply dummy text of the printing.
Info! Lorem Ipsum is simply dummy text of the printing.
<div class="alert alert-warning alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing. </div>
Alerts with icon
Warning! Lorem Ipsum is simply dummy printing.
Warning! Lorem Ipsum is simply dummy printing.
<div class="alert alert-icon-left alert-light-primary alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg data-bs-dismiss="alert"> ... </svg></button> <svg> ... </svg> <strong>Warning!</strong> Lorem Ipsum is simply dummy printing. </div> <div class="alert alert-icon-right alert-light-primary alert-dismissible fade show mb-4" role="alert"> <svg> ... </svg> <strong>Warning!</strong> Lorem Ipsum is simply dummy printing. </div>
Arrowed Alerts
Warning! Lorem Ipsum is simply dummy printing.
Warning! Lorem Ipsum is simply dummy printing.
<div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <svg> ... </svg> <strong>Warning!</strong> Lorem Ipsum is simply dummy printing. </div> <div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4" role="alert"> <svg> ... </svg> <strong>Warning!</strong> Lorem Ipsum is simply dummy printing. </div>
Custom Alerts
Warning! Lorem Ipsum is simply dummy text of the printing.
<div class="alert custom-alert-1 alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> .... </svg></button> <div class="media"> <div class="alert-icon"> <svg> .... </svg> </div> <div class="media-body"> <div class="alert-text"> <strong>Warning! </strong><span> Lorem Ipsum is simply dummy text of the printing.</span> </div> <div class="alert-btn"> <button type="button" class="btn btn-secondary">Accept</button> </div> </div> </div> </div>
New! Alert with gradient.
<div class="alert alert-gradient alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>New!</strong> Alert with gradient. </div>
New! Alert with background image.
<div class="alert alert-background alert-dismissible fade show mb-4" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>New!</strong> Alert with background image. </div>
Copyright © 2024 DesignReset, All rights reserved.
Coded with