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

<divclass="alert alert-primary"role="alert">  Here's a straightforward example of a primary alert—take a look!</div><divclass="alert alert-secondary"role="alert">  Here's a straightforward example of a secondary alert—take a look!</div><divclass="alert alert-success"role="alert">  Here's a straightforward example of a success alert—take a look!</div><divclass="alert alert-danger"role="alert">  Here's a straightforward example of a danger alert—take a look!</div><divclass="alert alert-warning"role="alert">  Here's a straightforward example of a warning alert—take a look!</div><divclass="alert alert-info"role="alert">  Here's a straightforward example of an info alert—take a look!</div><divclass="alert alert-light"role="alert">  Here's a straightforward example of a light alert—take a look!</div><divclass="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

<divid="liveAlertPlaceholder"></div><buttontype="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

constalertPlaceholder=document.getElementById('liveAlertPlaceholder')constappendAlert=(message,type)=>{constwrapper=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)}constalertTrigger=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 withan example link. Take a look!

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

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

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

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

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

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

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

html

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

<divclass="alert alert-success"role="alert"><h4class="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><pclass="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 utilizeflexbox utilities andCoreUI 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

<divclass="alert alert-primary d-flex align-items-center"role="alert"><svgclass="me-2"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 512 512"><rectwidth="32"height="176"x="240"y="176"fill="var(--ci-primary-color, currentColor)"class="ci-primary"/><rectwidth="32"height="32"x="240"y="384"fill="var(--ci-primary-color, currentColor)"class="ci-primary"/><pathfill="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

<svgxmlns="http://www.w3.org/2000/svg"class="d-none"><symbolid="icon-warning"viewBox="0 0 512 512"><rectwidth="32"height="176"x="240"y="176"fill="var(--ci-primary-color, currentColor)"class="ci-primary"/><rectwidth="32"height="32"x="240"y="384"fill="var(--ci-primary-color, currentColor)"class="ci-primary"/><pathfill="var(--ci-primary-color, currentColor)"d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"class="ci-primary"/></symbol><symbolid="icon-check"viewBox="0 0 512 512"><pathfill="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"/><polygonfill="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><symbolid="icon-info"viewBox="0 0 512 512"><rectwidth="34.924"height="34.924"x="256"y="95.998"fill="var(--ci-primary-color, currentColor)"class="ci-primary"/><pathfill="var(--ci-primary-color, currentColor)"d="M16,496H496V16H16ZM48,48H464V464H48Z"class="ci-primary"/><pathfill="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><divclass="alert alert-primary d-flex align-items-center"role="alert"><svgclass="flex-shrink-0 me-2"width="24"height="24"role="img"aria-label="Info:"><usexlink:href="#icon-info"/></svg><div>    A straightforward alert with an icon</div></div><divclass="alert alert-success d-flex align-items-center"role="alert"><svgclass="flex-shrink-0 me-2"width="24"height="24"role="img"aria-label="Success:"><usexlink:href="#icon-check"/></svg><div>    A straightforward success alert with an icon</div></div><divclass="alert alert-warning d-flex align-items-center"role="alert"><svgclass="flex-shrink-0 me-2"width="24"height="24"role="img"aria-label="Warning:"><usexlink:href="#icon-warning"/></svg><div>    A straightforward warning alert with an icon</div></div><divclass="alert alert-danger d-flex align-items-center"role="alert"><svgclass="flex-shrink-0 me-2"width="24"height="24"role="img"aria-label="Danger:"><usexlink: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 thealert-* contextual class (like alert-primary) and apply any of thebg-* utility classes (e.g.bg-primary,bg-danger,bg-success, etc.). Make sure to also add the appropriatetext-* 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

<divclass="alert bg-primary text-white"role="alert">  Here's a straightforward example of solid primary alert—take a look!</div><divclass="alert bg-secondary text-white"role="alert">  Here's a straightforward example of solid secondary alert—take a look!</div><divclass="alert bg-success text-white"role="alert">  Here's a straightforward example of solid success alert—take a look!</div><divclass="alert bg-danger text-white"role="alert">  Here's a straightforward example of solid danger alert—take a look!</div><divclass="alert bg-warning text-white"role="alert">  Here's a straightforward example of solid warning alert—take a look!</div><divclass="alert bg-info text-white"role="alert">  Here's a straightforward example of solid info alert—take a look!</div><divclass="alert bg-light "role="alert">  Here's a straightforward example of solid light alert—take a look!</div><divclass="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 aclose 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 thedata-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

<divclass="alert alert-warning alert-dismissible fade show"role="alert">  Wow, you might want to take a look at some of the fields listed below.<buttontype="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 theclosed.coreui.alert event and programmatically setsfocus() to the most suitable location on the page. If you plan to move focus to a typically non-interactive element, ensure you addtabindex="-1" to that element.

JavaScript behavior

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

In the constructor, please usebootstrap instead ofcoreui. For example,new bootstrap.Alert(...) instead ofnew coreui.Alert(...)
In events, please usebs instead ofcoreui, for exampleclose.bs.alert instead ofclose.coreui.alert
In data attributes, please usebs instead ofcoreui. For example,data-bs-toggle="..." instead ofdata-coreui-toggle="..."

Initialize

Set up elements as Bootstrap alerts

constalertList=document.querySelectorAll('.alert')constalerts=[...alertList].map(element=>newcoreui.Alert(element))

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

See thetriggers section for more details.

Triggers

Dismissal can be achieved with thedata attribute on a buttonwithin the alert as demonstrated below:

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

or on a buttonoutside the alert using thedata-coreui-target as demonstrated below:

<buttontype="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:

constcAlert=newcoreui.Alert('#myAlert')

This sets up an alert to listen for click events on descendant elements that have thedata-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:

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

constmyAlert=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}solidvar(--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 thealert-variant() mixin.

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert.@each$stateinmap.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 forReact.js,Vue.js, andAngular, 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

Movatterモバイル変換

Bootstrap 5 Alerts

Alerts

Other frameworks

Examples

Conveying meaning to assistive technologies

Live example

Link color

Additional content

Great job!

Icons

Solid

Dismissing

JavaScript behavior

Initialize

Triggers

Methods

Events

Customizing

CSS variables

SASS variables

SASS mixin

SASS loop

CoreUI vs Bootstrap