Question 42549 in Html Question posted in
Some basic documentation can be found here.

Bootstrap Alert: Dismiss button showing incorrectly – Html

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/[email protected]/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>
Tags:

3

Answers


  1. 0

    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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
  2. 0 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
       
    </button>
</div>
    Login or Signup to reply.
  3. 0

    You can just use this CODE to make Bootstrap ALERT working with Close Button –

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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-custom alert-dismissible fade show" role="alert">
      <strong>Alert!</strong> 
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search