Logo

Base Example

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.


                        <div class="alert alert-primary" role="alert">
                            A simple primary alert—check it out!
                        </div>
                        <div class="alert alert-secondary" role="alert">
                            A simple secondary alert—check it out!
                        </div>
                        <div class="alert alert-success" role="alert">
                            A simple success alert—check it out!
                        </div>
                        <div class="alert alert-danger" role="alert">
                            A simple danger alert—check it out!
                        </div>
                        <div class="alert alert-warning" role="alert">
                            A simple warning alert—check it out!
                        </div>
                        <div class="alert alert-info" role="alert">
                            A simple info alert—check it out!
                        </div>
                        <div class="alert alert-light" role="alert">
                            A simple light alert—check it out!
                        </div>
                        <div class="alert alert-dark" role="alert">
                            A simple dark alert—check it out!
                        </div> 

Link Color

Use the .alert-linkutility class to quickly provide matching colored links within any alert.


                        <div class="alert alert-primary" role="alert">
                            A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
                        </div>
                        <div class="alert alert-secondary" role="alert">
                            A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
                        </div> 

Additional Content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.


                        <div class="alert alert-success mb-5 p-5" role="alert">
                            <h4 class="alert-heading">Well done!</h4>
                            <p>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.</p>
                            <div class="border-bottom border-white opacity-20 mb-5"></div>
                            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                        </div>

Custom Alerts

Metronic's custom alerts extends Bootstrap Alerts with more advanced layout and styling.


                        <div class="alert alert-custom alert-primary" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                        </div>
                        <div class="alert  alert-custom alert-secondary" role="alert">
                            <div class="alert-icon"><i class="flaticon-questions-circular-button"></i></div>
                            <div class="alert-text">A simple secondary alert—check it out!</div>
                        </div>

Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert.


                        <div class="alert alert-custom alert-primary fade show" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                            <div class="alert-close">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                </button>
                            </div>
                        </div>

Outline Style

Use alert-outline-{color}to have outline styled alerts.


                        <div class="alert alert-custom alert-outline-primary fade show mb-5" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                            <div class="alert-close">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                </button>
                            </div>
                        </div>

Use alert-outline-2to increase the border width.


                        <div class="alert alert-custom alert-outline-2x alert-outline-primary fade show mb-5" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                            <div class="alert-close">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                </button>
                            </div>
                        </div>

Light Style

Use alert-light-{color}to have light style alerts.


                        <div class="alert alert-custom alert-light-primary fade show mb-5" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                            <div class="alert-close">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                </button>
                            </div>
                        </div>

Notice Style

Use alert-notice alert-light-{color}to have notice styled alerts.


                        <div class="alert alert-custom alert-notice alert-light-primary fade show" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text">A simple primary alert—check it out!</div>
                            <div class="alert-close">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                </button>
                            </div>
                        </div>

Alert Shadow

Use alert-shadowto have an alert with shadow. Also .shadow-sm, .shadowand .shadow-lgclasses can be used to adjust the shadow size.


                        <div class="alert alert-custom alert-white alert-shadow fade show" role="alert">
                            ...
                        </div>

                        <div class="alert alert-custom alert-white shadow-sm fade show" role="alert">
                        ...
                        </div>

                        <div class="alert alert-custom alert-white shadow fade show" role="alert">
                        ...
                        </div>

                        <div class="alert alert-custom alert-white shadow-lg fade show" role="alert">
                        ...
                        </div>

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%