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 border-0 mb-4" role="alert"> <button type="button" class="close" data-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 mb-4" role="alert"> <button type="button" class="close" data-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 mb-4" role="alert"> <button type="button" class="close" data-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 mb-4" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg data-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 mb-4" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg data-dismiss="alert"> ... </svg></button> <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="close" data-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"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <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 mb-4" role="alert"> <button type="button" class="close" data-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-default btn-dismiss">Accept</button> </div> </div> </div> </div>
New! Alert with gradient.
<div class="alert alert-gradient mb-4" role="alert"> <button type="button" class="close" data-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 mb-4" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button> <strong>New!</strong> Alert with background image. </div>
Copyright © 2021 DesignReset, All rights reserved.
Coded with