Bootstrap 5 Alerts

Alerts

Bootstrap alerts give contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.

🤖 Looking for the LLM-optimized version? View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

Examples

Bootstrap alerts can accommodate text of any length and feature an optional close button. To style an alert, apply one of the required contextual classes (e.g., .alert-success). For inline dismissal, utilize the alerts JavaScript plugin.

Here's a straightforward example of a primary alert—take a look!

Here's a straightforward example of a secondary alert—take a look!

Here's a straightforward example of a success alert—take a look!

Here's a straightforward example of a danger alert—take a look!

Here's a straightforward example of a warning alert—take a look!

Here's a straightforward example of an info alert—take a look!

Here's a straightforward example of a light alert—take a look!

Here's a straightforward example of a dark alert—take a look!

html

<div class="alert alert-primary" role="alert">
  Here's a straightforward example of a primary alert—take a look!
</div>
<div class="alert alert-secondary" role="alert">
  Here's a straightforward example of a secondary alert—take a look!
</div>
<div class="alert alert-success" role="alert">
  Here's a straightforward example of a success alert—take a look!
</div>
<div class="alert alert-danger" role="alert">
  Here's a straightforward example of a danger alert—take a look!
</div>
<div class="alert alert-warning" role="alert">
  Here's a straightforward example of a warning alert—take a look!
</div>
<div class="alert alert-info" role="alert">
  Here's a straightforward example of an info alert—take a look!
</div>
<div class="alert alert-light" role="alert">
  Here's a straightforward example of a light alert—take a look!
</div>
<div class="alert alert-dark" role="alert">
  Here's a straightforward example of a dark alert—take a look!
</div>

Conveying meaning to assistive technologies

Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the .visually-hidden class.

Live example

Click the button below to show an alert (initially hidden with inline styles), then dismiss (and destroy) it using the built-in close button.

html

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show alert with message</button>

The JavaScript below initiates our live alert demo:

docs/assets/js/partials/snippets.js

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-coreui-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success')
  })
}

Link color

Utilize the .alert-link utility class to instantly create matching colored links within any alert.

Here's a straightforward example of a primary alert with an example link. Take a look!

Here's a straightforward example of a secondary alert with an example link. Take a look!

Here's a straightforward example of a success alert with an example link. Take a look!

Here's a straightforward example of a danger alert with an example link. Take a look!

Here's a straightforward example of a warning alert with an example link. Take a look!

Here's a straightforward example of an info alert with an example link. Take a look!

Here's a straightforward example of a light alert with an example link. Take a look!

Here's a straightforward example of a dark alert with an example link. Take a look!

html

<div class="alert alert-primary" role="alert">
  Here's a straightforward example of a primary alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-secondary" role="alert">
  Here's a straightforward example of a secondary alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-success" role="alert">
  Here's a straightforward example of a success alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-danger" role="alert">
  Here's a straightforward example of a danger alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-warning" role="alert">
  Here's a straightforward example of a warning alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-info" role="alert">
  Here's a straightforward example of an info alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-light" role="alert">
  Here's a straightforward example of a light alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>
<div class="alert alert-dark" role="alert">
  Here's a straightforward example of a dark alert with <a href="#" class="alert-link">an example link</a>. Take a look!
</div>

Additional content

Bootstrap alerts can also include additional HTML elements such as headings, paragraphs, and dividers.

Great job!

Awesome! You've successfully read this crucial alert message. This example text will be slightly longer to demonstrate how spacing in an alert interacts with this type of content.

Whenever necessary, make sure to use margin utilities to keep everything organized and neat.

html

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Great job! </h4>
  <p>Awesome! You've successfully read this crucial alert message. This example text will be slightly longer to demonstrate how spacing in an alert interacts with this type of content.</p>
  <hr>
  <p class="mb-0">Whenever necessary, make sure to use margin utilities to keep everything organized and neat.</p>
</div>

Icons

In a similar vein, you can utilize flexbox utilities and CoreUI Icons for crafting alerts that include icons. Based on your choice of icons and the content involved, you might consider incorporating additional utilities or custom styling.

An example alert with an icon

html

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
    <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/>
    <rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/>
    <path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

If you require multiple icons for your alerts, think about utilizing additional CoreUI Icons and creating a local SVG sprite. This method allows for easy and repeated reference to the same icons.

A straightforward alert with an icon

A straightforward success alert with an icon

A straightforward warning alert with an icon

A straightforward danger alert with an icon

html

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="icon-warning" viewBox="0 0 512 512">
    <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/>
    <rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/>
    <path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 512 512">
    <path fill="var(--ci-primary-color, currentColor)" d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z" class="ci-primary"/>
    <polygon fill="var(--ci-primary-color, currentColor)" points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808" class="ci-primary"/>
  </symbol>
  <symbol id="icon-info" viewBox="0 0 512 512">
    <rect width="34.924" height="34.924" x="256" y="95.998" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/>
    <path fill="var(--ci-primary-color, currentColor)" d="M16,496H496V16H16ZM48,48H464V464H48Z" class="ci-primary"/>
    <path fill="var(--ci-primary-color, currentColor)" d="M285.313,359.032a18.123,18.123,0,0,1-15.6,8.966,18.061,18.061,0,0,1-17.327-23.157l35.67-121.277A49.577,49.577,0,0,0,194.7,190.572l-11.718,28.234,29.557,12.266,11.718-28.235a17.577,17.577,0,0,1,33.1,11.7l-35.67,121.277A50.061,50.061,0,0,0,269.709,400a50.227,50.227,0,0,0,43.25-24.853l15.1-25.913-27.646-16.115Z" class="ci-primary"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#icon-info"/></svg>
  <div>
    A straightforward alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#icon-check"/></svg>
  <div>
    A straightforward success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#icon-warning"/></svg>
  <div>
    A straightforward warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#icon-warning"/></svg>
  <div>
    A straightforward danger alert with an icon
  </div>
</div>

Solid

Use solid alerts to create high-contrast notifications by applying background utility classes. This variant removes the default alert styling and relies on the utility classes for full-color backgrounds and text.

To create a solid alert, remove the alert-* contextual class (like alert-primary) and apply any of the bg-* utility classes (e.g. bg-primary, bg-danger, bg-success, etc.). Make sure to also add the appropriate text-* class to ensure good contrast and accessibility.

Here's a straightforward example of solid primary alert—take a look!

Here's a straightforward example of solid secondary alert—take a look!

Here's a straightforward example of solid success alert—take a look!

Here's a straightforward example of solid danger alert—take a look!

Here's a straightforward example of solid warning alert—take a look!

Here's a straightforward example of solid info alert—take a look!

Here's a straightforward example of solid light alert—take a look!

Here's a straightforward example of solid dark alert—take a look!

html

<div class="alert bg-primary text-white" role="alert">
  Here's a straightforward example of solid primary alert—take a look!
</div>
<div class="alert bg-secondary text-white" role="alert">
  Here's a straightforward example of solid secondary alert—take a look!
</div>
<div class="alert bg-success text-white" role="alert">
  Here's a straightforward example of solid success alert—take a look!
</div>
<div class="alert bg-danger text-white" role="alert">
  Here's a straightforward example of solid danger alert—take a look!
</div>
<div class="alert bg-warning text-white" role="alert">
  Here's a straightforward example of solid warning alert—take a look!
</div>
<div class="alert bg-info text-white" role="alert">
  Here's a straightforward example of solid info alert—take a look!
</div>
<div class="alert bg-light " role="alert">
  Here's a straightforward example of solid light alert—take a look!
</div>
<div class="alert bg-dark text-white" role="alert">
  Here's a straightforward example of solid dark alert—take a look!
</div>

Dismissing

Using the JavaScript plugin, you can remove any alert.

Ensure that you’ve loaded the Bootstrap alert plugin or the compiled CoreUI JavaScript.
Add a close button along with the .alert-dismissible class, which provides extra padding to the right of the alert component and positions the .close button.
On the close button, include the data-coreui-dismiss="alert" attribute, which triggers the JavaScript functionality. You must use the <button> element with it for proper behavior across all devices.
To animate alerts during dismissal, you need to add the .fade and .show classes.

You can observe this in action with a live demonstration:

Wow, you might want to take a look at some of the fields listed below.

html

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Wow, you might want to take a look at some of the fields listed below.
  <button type="button" class="btn-close" data-coreui-dismiss="alert" aria-label="Close"></button>
</div>

When the Bootstrap alert is dismissed, it is fully removed from the page structure. If a keyboard user closes the alert using the close button, their focus may be unexpectedly lost, and depending on the browser, it might be reset to the beginning of the page or document. Therefore, we recommend implementing additional JavaScript that listens for the closed.coreui.alert event and programmatically sets focus() to the most suitable location on the page. If you plan to move focus to a typically non-interactive element, ensure you add tabindex="-1" to that element.

JavaScript behavior

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Initialize

Set up elements as Bootstrap alerts

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new coreui.Alert(element))

To solely dismiss the Bootstrap alert, you do not need to manually initialize the component via the JS API. By using data-coreui-dismiss="alert", the component will initialize automatically and dismiss properly.

See the triggers section for more details.

Triggers

Dismissal can be achieved with the data attribute on a button within the alert as demonstrated below:

<button type="button" class="btn-close" data-coreui-dismiss="alert" aria-label="Close"></button>

or on a button outside the alert using the data-coreui-target as demonstrated below:

<button type="button" class="btn-close" data-coreui-dismiss="alert" data-coreui-target="#my-alert" aria-label="Close"></button>

Note that closing an alert will remove it from the DOM.

Methods

You can create an alert instance using the alert constructor, for example:

const cAlert = new coreui.Alert('#myAlert')

This sets up an alert to listen for click events on descendant elements that have the data-coreui-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)

Method	Description
`close`	Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before being removed.
`dispose`	Destroys an element’s alert and removes any stored data associated with the DOM element.
`getInstance`	A static method that allows you to retrieve the alert instance linked to a DOM element. For example: `coreui.Alert.getInstance(alert)`.
`getOrCreateInstance`	A static method that returns the alert instance associated with a DOM element or creates a new one if it hasn’t been initialized. You can use it as follows: `coreui.Alert.getOrCreateInstance(element)`.

Basic usage:

const alert = coreui.Alert.getOrCreateInstance('#myAlert')
alert.close()

Events

CoreUI for Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event	Description
`close.coreui.alert`	Triggers immediately when the `close` instance method is invoked.
`closed.coreui.alert`	Triggered when the alert has been closed and CSS transitions have finished.

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.coreui.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})

Customizing

CSS variables

Our Bootstrap alerts utilize local CSS variables on .alert for improved real-time customization. The values for the CSS variables are set using Sass, ensuring that Sass customization remains supported as well.

scss/_alert.scss

--cui-alert-bg: transparent;
--cui-alert-padding-x: #{$alert-padding-x};
--cui-alert-padding-y: #{$alert-padding-y};
--cui-alert-margin-bottom: #{$alert-margin-bottom};
--cui-alert-color: inherit;
--cui-alert-border-color: transparent;
--cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color);
--cui-alert-border-radius: #{$alert-border-radius};
--cui-alert-link-color: inherit;

SASS variables

scss/_variables.scss

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           var(--#{$prefix}border-radius);
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            var(--#{$prefix}border-width);
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

SASS mixin

Deprecated in v5.0.0

Used alongside $alert-variants to create contextual modifier classes for our alerts.

scss/mixins/_alert.scss

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: var(--#{$prefix}alert-link-color);
  }
}

SASS loop

Loop that creates the modifier classes with the alert-variant() mixin.

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert.
@each $state in map.keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

CoreUI vs Bootstrap

While this Alert component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

✅ Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
🧠 Framework-native versions – CoreUI provides dedicated libraries for React.js, Vue.js, and Angular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
👨‍💻 Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
📦 More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
🛠️ Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
🌍 Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
🔒 LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap