# 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

Show code
Heads up! This is a info alert with an example link — check it out!

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

Show code
Heads up! This is a info alert with an example link — check it out!

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

Show code
Heads up! This is a info alert with an example link — check it out!

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

Show code
Heads up! This is a info alert with an example link — check it out!
Heads up! This is a info alert with an example link — check it out!

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

Show code
Heads up! This is a info alert with an example link — check it out!

    <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

Show code
Heads up! This is a info alert with an example link — check it out!
Heads up! This is a info alert with an example link — check it out!

    <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

Show code
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:

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

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

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

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