How do I create a dismissable information bar in Bootstrap?
Asked on Oct 04, 2025
Answer
To create a dismissable information bar in Bootstrap, you can use the alert component with a close button. This allows users to close the alert when it's no longer needed.
<!-- BEGIN COPY / PASTE -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
This is an information bar!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `alert-info` class gives the alert an informational color.
- The `alert-dismissible` class makes it possible to dismiss the alert.
- The `fade` and `show` classes are used for the fade-out effect when the alert is dismissed.
- The `btn-close` button is used to close the alert, and it requires the `data-bs-dismiss="alert"` attribute.
- Ensure Bootstrap's JavaScript is included in your project to enable the dismiss functionality.
Recommended Links:
← Back to All Questions