PureDevOps Community

Bootstrap dismissible alert not working ( data-dismiss="alert")

I have been working out for a while and i can’t seem to find any solution to it! I’m using bootstrap and i have a dismissible alert but when i click on the x to dismiss nothing happens.

Below is the code


    <div class="row">
      <div class="col-8">
        <div class="d-none d-lg-block mb-4">
          <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>

If you are using Bootstrap 5.0 it seems in the bootstrap.js code the data-dismiss selector has changed to data-bs-dismiss. So I just had to change data-dismiss="alert" to data-bs-dismiss="alert" and it worked.

<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
</button>