CODEWITHSUNDEEP
bootstrap-5
lllllllllm
lllllllllm

Reputation: 11

Close button not working for Toast in bootstrap

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>

Upvotes: 1

Views: 935

Answers (1)

Eugen
Eugen

Reputation: 51

Did you include the necessary js and css files for bootstrap? you can find more about the necessary dependencies on : https://getbootstrap.com/docs/5.0/getting-started/introduction/ Here is an example of CDN using:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 0

Related Questions