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-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>

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-success 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-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>

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-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-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>

Shadow

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

<div class="alert alert-success 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-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>
<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-primary">
    
<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-white 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-danger">
    
<span class="badge badge-danger badge-pill">
    New
</span>
	<span class="alert-content">E-commerce module, new app pages and features</span>
</div>
Summary