Bootstrap alert button design is off and doesn't close when clicked

user_13047293 0
Viewed 724

I am experimenting with Bootstrap, the bootstrap alert button is somehow not working at all. All I did was copy the code from Bootstrap : enter image description here

But the page is showing this? The design of the button is off, and it's not working(doesn't close). I checked everything: alert-dismissible is there, the button has data-dismiss = 'alert', but somehow it's not working. The script I included is the Bootstrap bundle version. enter image description here

bootstrap-5 bootstrap-modal css html
1 Answers

You changed a small part of the example: your data-dismiss should be data-bs-dismiss and the class on the button should be btn-close instead of close:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Documentation about dismissing

On close inspection, I noticed that your alert is a Boostrap 4 alert. In your example, you use the CSS and JavaScript from Bootstrap 5, where dismissible alerts should look like the example above.

user_13361740
Related