Search code examples
htmlbootstrap-5hbs

Alert does not close when trying to close it

I have an alert that has two problems, the first one is that it does not close when I click on the "X" button. I am using Bootstrap 5

This is how the alert appears

This is the code

{{#if success}}
<div class="container p-4">
  <div class="row">
    <div class="col-md-auto mx-auto">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{success}}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span area-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>
{{/if}}

I was investigating and it seemed to be because I wasn't using the bootstrap script BUT I did have it at the time, so I looked for the most recent version and put it in the layout/main.hbs of my project, just below where the partials or other views are called (In <body>)

This is the script I found in the Bootstrap documentation, and it didn't work even with it

<!DOCTYPE html>
<html lang="en">

<head>...</head>

<body style="background-color:#2e2c25"> {{!-- #212529 navbar --}}

    {{> navigation }}

    {{{ body }}}

    {{!-- Scripts --}}

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

I tried to find some mistake of mine but I didn't find any that could affect that

The other problem I have with that alert is that the "X" for some reason doesn't look pretty, it looks in a white square, and there's a lot of spacing to the right, BUT this is minor, for now I'm only interested in the alert being able to close

Solution

  • REMOVE <span area-hidden="true">&times;</span>

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
{{#if success}}
<div class="container p-4">
  <div class="row">
    <div class="col-md-auto mx-auto">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{success}}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      
      </div>
    </div>
    
  
  </div>
</div>
{{/if}}

  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>