Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. This is probably the most amazing set of alerts available in a UI.

Bootstrap Documentation

Examples

Default

<div class="alert alert-warning" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

Flushed alert

Get a flash message that is full width and removes border and radius by adding the .alert-flush modifier class:

<div class="alert alert-warning alert-flush" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

Outline

Create an outlined alert by using the same color options. All you have to do is to add the .alert-outline-COLOR_NAME, where color name is any of the theme’s colors (e.g: warning, success, danger, dark):

<div class="alert alert-outline-warning" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

Multiple alerts

Should the need arise, you can quickly space out your flash message from surrounding content with a .alert-messages wrapper. Note the extra top and bottom margin in the example below.

<div class="alert-messages">
<div class="alert alert-warning" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>
<div class="alert alert-warning" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>
</div>

Shadow

Add depth to any alert using the .shadow, .shadow-* utilities:

<div class="alert alert-warning shadow-lg" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

Dismissible

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>

Modern

We love this modern type of alerts. Easy to get the attention without making it look too bad. Use the .alert-modern modifier class on any .alert element:

Default

Hot E-commerce module, new app pages and features 
<div class="alert alert-modern alert-warning">
    
<span class="badge badge-warning badge-pill">
    Hot
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>

Colors

Same rules as for any alert. Use it in combination with any of the theme’s colors:

New E-commerce module, new app pages and features 
<div class="alert alert-modern alert-success">
    
<span class="badge badge-success badge-pill">
    New
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>
New E-commerce module, new app pages and features 
<div class="alert alert-modern alert-dark">
    
<span class="badge badge-danger badge-pill">
    New
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>

Outline

New E-commerce module, new app pages and features 
<div class="alert alert-modern alert-outline-success">
    
<span class="badge badge-success badge-pill">
    New
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>
New E-commerce module, new app pages and features 
<div class="alert alert-modern alert-outline-dark">
    
<span class="badge badge-danger badge-pill">
    New
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>

Alert group

Icon

<div class="alert alert-group alert-warning alert-icon" role="alert">
	<div class="alert-group-prepend">
        <span class="alert-group-icon text-">
            <i class="far fa-thumbs-up"></i>
        </span>
    </div>
    <div class="alert-content">
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </div>
	
</div>
<div class="alert alert-group alert-info alert-dismissible fade show alert-icon" role="alert">
	<div class="alert-group-prepend">
        <span class="alert-group-icon text-">
            <i class="far fa-thumbs-up"></i>
        </span>
    </div>
    <div class="alert-content">
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </div>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="alert alert-group alert-outline-danger alert-dismissible fade show alert-icon" role="alert">
	<div class="alert-group-prepend">
        <span class="alert-group-icon text-">
            <i class="far fa-thumbs-up"></i>
        </span>
    </div>
    <div class="alert-content">
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </div>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>

Action

<div class="alert alert-group alert-warning alert-icon" role="alert">
	<div class="alert-group-prepend">
        <span class="alert-group-icon text-">
            <i class="far fa-thumbs-up"></i>
        </span>
    </div>
    <div class="alert-content">
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </div>
	<div class="alert-action">
        <button type="button" class="btn btn-warning" aria-label="Action Label">Action</button>
    </div>
</div>
<div class="alert alert-group alert-info alert-dismissible fade show alert-icon" role="alert">
	<div class="alert-group-prepend">
        <span class="alert-group-icon text-">
            <i class="far fa-thumbs-up"></i>
        </span>
    </div>
    <div class="alert-content">
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </div>
	<div class="alert-action">
        <button type="button" class="btn btn-info" aria-label="Action Label">Action</button>
    </div><button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>

Content

Alerts are very flexible and allow you to use different types of contents:

Multiple paragraphs

You can put multiple paragraphs of text in a flash message—the last paragraph’s bottom margin will be automatically override.

<div class="alert alert-warning" role="alert">
    <p>
        <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
    </p>
    <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Large content

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

<div class="alert alert-warning" role="alert">
    <h5 class="alert-heading">Well done!</h5>
    <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>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    <a href="#" class="btn btn-sm btn-warning">Ok, Got it!</a>
</div>

Colors

Variations

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g: .alert-success).

<div class="alert alert-primary" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-secondary" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-success" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-danger" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-warning" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>

<div class="alert alert-dark" role="alert">
    <strong>Heads up!</strong> This is a info alert with <a href="#" class="alert-link">an example link</a> — check it out!
</div>
Summary