Get Karik Now

Alerts

40+ Alerts style: soft conner, rounded, outline...

  1. Home
  2. Elements
  3. Alerts

Basic Alerts

Based on Bootstrap

Advance Alerts

Custom style
Bootstrap Alert

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

    
<div class="alert alert-brand" role="alert">
    A simple brand alert - check it out!
</div>
<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 Alert

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

                                                
<div class="alert alert-brand" role="alert">
    A simple brand alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>                                                   
<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>
<div class="alert alert-success" role="alert">
    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
    A simple dark 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" 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>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Light Background Alert

Use alert-muted-{color} to create alerts outline style .

                                                
<div class="alert custom-alert alert-muted-brand alert-dismissible fade show" role="alert">
    <i class="ti-alert alert-icon"></i>
    <p class="mb-0 alert-text">
    You can dismiss me by click to Close button
    </p>
    <div class="alert-close">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true"><i class="ti-close"></i></span>
        </button>
    </div>                                            
</div>
Outline Alert

Use alert-outline-{color} to create alerts outline style .

                                                
<div class="alert custom-alert alert-outline-brand alert-dismissible fade show" role="alert">
    <i class="ti-alert alert-icon"></i>
    <p class="mb-0 alert-text">
        You can dismiss me by click to Close button
    </p>
    <div class="alert-close">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true"><i class="ti-close"></i></span>
        </button>
    </div>                                            
</div>
Shadow Alert

Use alert-muted-{color} to create alerts outline style .

                                                
<div class="alert custom-alert alert-shadow-brand alert-dismissible fade show" role="alert">
    <i class="ti-alert alert-icon"></i>
    <p class="mb-0 alert-text">
    You can dismiss me by click to Close button
    </p>
    <div class="alert-close">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true"><i class="ti-close"></i></span>
        </button>
    </div>                                            
</div>
Dismissing Alert

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

                                                
<div class="alert custom-alert alert-warning alert-dismissible fade show" role="alert">
    <i class="ti-alert alert-icon"></i>
    <p class="mb-0 alert-text">
        You can dismiss me by click to Close button
    </p>
    <div class="alert-close">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true"><i class="ti-close"></i></span>
        </button>
    </div>                                            
</div>