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.
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-success"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"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:
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-success alert-flush"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"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):
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-outline-success"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"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.
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!
<divclass="alert-messages"><divclass="alert alert-success"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-success"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div></div>
Shadow
Add depth to any alert using the .shadow, .shadow-* utilities:
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-success shadow-lg"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div>
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!
<divclass="alert alert-success alert-dismissible fade show"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="alert alert-success alert-dismissible fade show"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</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:
<divclass="alert alert-modern alert-primary"><spanclass="badge badge-warning badge-pill">
Hot
</span><spanclass="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:
<divclass="alert alert-modern alert-success"><spanclass="badge badge-white badge-pill">
New
</span><spanclass="alert-content">E-commerce module, new app pages and features</span></div>
<divclass="alert alert-modern alert-dark"><spanclass="badge badge-danger badge-pill">
New
</span><spanclass="alert-content">E-commerce module, new app pages and features</span></div>
<divclass="alert alert-modern alert-outline-success"><spanclass="badge badge-success badge-pill">
New
</span><spanclass="alert-content">E-commerce module, new app pages and features</span></div>
<divclass="alert alert-modern alert-outline-danger"><spanclass="badge badge-danger badge-pill">
New
</span><spanclass="alert-content">E-commerce module, new app pages and features</span></div>
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!
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-group alert-success alert-icon"role="alert"><divclass="alert-group-prepend"><spanclass="alert-group-icon text-"><idata-feather="thumbs-up"></i></span></div><divclass="alert-content"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div></div><divclass="alert alert-group alert-primary alert-dismissible fade show alert-icon"role="alert"><divclass="alert-group-prepend"><spanclass="alert-group-icon text-"><idata-feather="info"></i></span></div><divclass="alert-content"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="alert alert-group alert-outline-warning alert-dismissible fade show alert-icon"role="alert"><divclass="alert-group-prepend"><spanclass="alert-group-icon text-"><idata-feather="thumbs-down"></i></span></div><divclass="alert-content"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button></div>
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!
<divclass="alert alert-group alert-warning alert-icon"role="alert"><divclass="alert-group-prepend"><spanclass="alert-group-icon text-"><idata-feather="alert-triangle"></i></span></div><divclass="alert-content"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert-action"><buttontype="button"class="btn btn-neutral"aria-label="Action Label">Action</button></div></div><divclass="alert alert-group alert-danger alert-dismissible fade show alert-icon"role="alert"><divclass="alert-group-prepend"><spanclass="alert-group-icon text-"><idata-feather="clock"></i></span></div><divclass="alert-content"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert-action"><buttontype="button"class="btn btn-neutral"aria-label="Action Label">Action</button></div><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</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.
Heads up! This is a info alert with an example link — check it out!
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<divclass="alert alert-info"role="alert"><p><strong>Heads up!</strong> This is a info alert with <ahref="#"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.
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<divclass="alert alert-success"role="alert"><h5class="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><ahref="#"class="btn btn-sm btn-neutral">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).
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!
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!
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!
Heads up! This is a info alert with an example link — check it out!
<divclass="alert alert-primary"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-secondary"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-success"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-danger"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-warning"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-info"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div><divclass="alert alert-dark"role="alert"><strong>Heads up!</strong> This is a info alert with <ahref="#"class="alert-link">an example link</a> — check it out!
</div>