Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Alerts

Primary! This alert box indicates an important action.
Success! This alert box could indicate a successful or positive action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Info! This alert box could indicate a neutral informative change or action.
Secondary! This alert box indicates a less important action.
Light! This alert box indicates light grey alert box.
Dark! This alert box indicates dark grey alert box.

Basic Alert

Bootstrap alerts provide contextual feedback messages for typical user actions.

Alerts are created with the .alert class, followed by one of the following contextual classes:

  • .alert-primary
  • .alert-secondary
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-light
  • .alert-dark
Run code

Alert Links

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

Run code

Additional Content

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

Well done!

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.

Run code

Closing Alerts

Using the alert JavaScript plugin, it’s possible to dismiss any alert:

Click on the × symbol to the right to close me.
Run code

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Animated Alerts

To animate alerts when dismissing them, be sure to add the .fade and .show classes:

Click on the × symbol to the right to close me. I will "fade" out.
Run code

Complete Bootstrap 4 Alert Reference

For a complete reference of all alert options, methods and events, visit our Bootstrap 4 JS Alert Reference.