Bootstrap Alert: Dismiss button showing incorrectly

April 18, 2023

I’m messing around with Bootstrap and I think I’ve done everything listed on their page about the Alert. But my close-button just looks like a big fat grey square with an X in it.

Any idea what I’m missing?

https://codepen.io/Slagon/pen/NWORGpv

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<ul class="list-group">
  <li class="list-group-item">1</li>
  <li class="list-group-item">2</li>
  <li class="list-group-item">3</li>
</ul>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>Alert!</strong> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

>Solution :

you are using close class in the button. Just change it to btn-close

Here is a working demo:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<ul class="list-group">
  <li class="list-group-item">1</li>
  <li class="list-group-item">2</li>
  <li class="list-group-item">3</li>
</ul>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>Alert!</strong> 
    <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true" >&times;</span>
    </button>
</div>