How do I create a dismissable information bar in Bootstrap?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I create a dismissable information bar in Bootstrap?

Asked on Sep 22, 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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I create a dismissable information bar in Bootstrap?

Asked on Sep 22, 2025

Answer

The Q&A Network