Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Alerts in Bootstrap 5
Alerts: Provide contextual feedback messages for typical user actions with flexible styling.
Basic Alerts
Alerts are available for any length of text, as well as an optional close button.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<!-- Basic Alert Structure --> <div class="alert alert-primary" role="alert"> A simple primary alert </div> <div class="alert alert-success" role="alert"> Operation successful! </div> <div class="alert alert-danger" role="alert"> Error occurred! </div>
Alert with Links
Use the .alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
<!-- Alert with Link --> <div class="alert alert-success" role="alert"> File uploaded successfully! <a href="#" class="alert-link">View file</a> </div> <div class="alert alert-warning" role="alert"> Your subscription expires in 3 days. <a href="#" class="alert-link">Renew now</a> </div>
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.
<!-- Alert with Heading and Content --> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Detailed message goes here...</p> <hr> <p class="mb-0">Additional information...</p> </div>
Dismissible Alerts
Add a close button and the .alert-dismissible class to make alerts dismissible.
Warning! This is a dismissible warning alert.
Information! This alert can be dismissed by clicking the X button.
<!-- Dismissible Alert --> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Warning!</strong> This is a dismissible alert. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Alert with Icons
Success! Your profile has been updated successfully.
Error! Please check your input and try again.
<!-- Alert with Icon -->
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img">
<!-- SVG icon code -->
</svg>
<div>
Success message here
</div>
</div>Alert Variations
Background Alerts
This is a primary alert with solid background
This is a success alert with solid background
Outline Alerts
This is a primary alert with outline
This is a success alert with outline
JavaScript Behavior
Programmatic Control
// JavaScript to trigger alerts
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-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('');
alertPlaceholder.append(wrapper);
}
const trigger = document.getElementById('liveAlertBtn');
trigger.addEventListener('click', () => {
appendAlert('Nice, you triggered this alert!', 'success');
});Accessibility
Accessibility Best Practices
- Always include the
role="alert"attribute for screen readers - Use appropriate color contrast for text and background
- Provide clear and concise messages
- For dismissible alerts, ensure the close button has proper aria-label
- Consider using ARIA live regions for dynamic content
Best Practices
Do's
- ✅ Use appropriate alert types for different situations
- ✅ Keep messages clear and concise
- ✅ Use dismissible alerts for non-critical messages
- ✅ Include helpful links when relevant
- ✅ Test color contrast for accessibility
Don'ts
- ❌ Don't overuse alerts
- ❌ Avoid vague or generic messages
- ❌ Don't use alerts for success confirmation of every action
- ❌ Avoid making critical errors dismissible
- ❌ Don't forget accessibility attributes
