Close button not working for Toast in bootstrap

lllllllllm 0
Viewed 23

I am a beginner in Bootstrap v5, I found that the close button is not working for Toasts in my codes even though I just copied the code from the website. Here is my code

<div class="toast show" >
<div class="toast-header">
  <strong class="me-auto">Bootstrap</strong>
  <small>11 mins ago</small>
  <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
  Hello, world! This is a toast message.
</div>
bootstrap-5
1 Answers

Did you include the necesary js and css files for bootstrap? Here is a CDN I used:

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
        
        <div class="toast show">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
    </div>

Eugen0
Related