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.
img This is an example top alert. You can edit what u wish.
img 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.
img This is an example top alert. You can edit what u wish.
img 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>
                                    
                                
All Rights Reserved by Ample admin. Designed and Developed by WrapPixel.