Alert with different color
use the class alert alert-*colors* for dezier
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
Dissmissal Alert
add the button with close class
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
Alert with image / icon
add the image / icon before content
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
<!-- Alert with different color -->
<div class="alert alert-success">This is an example top alert. You can edit what u wish. </div>
<!-- Dissmissal Alert -->
<div class="alert alert-success"> <i class="ti-user"></i> This is an example top alert. You can edit what u wish.
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<!-- Alert with image / icon -->
<div class="alert alert-warning"> <img src="../../assets/images/users/1.jpg" width="30" class="rounded-circle" alt="img"> This is an example top alert. You can edit what u wish.
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
Alert with rounded corner
add the alert-rounded class to the alert
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
This is an example top alert. You can edit what u wish.
Alert with content
Alerts can also contain additional HTML elements
Success
This is an example top alert. You can edit what u wish. Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.Information
This is an example top alert. You can edit what u wish. Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.Warning
This is an example top alert. You can edit what u wish. Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
<!-- Alert with rounded corner -->
<div class="alert alert-success alert-rounded"> <i class="ti-user"></i> This is an example top alert. You can edit what u wish.
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<!-- Alert with content -->
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<h3 class="text-success"><i class="fa fa-check-circle"></i> Success</h3> This is an example top alert. You can edit what u wish. Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>