Toast does not working

I am trying to use bootstrap toast in my site but it does not work.How to fix it.Here is my code.

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Convention Center</title>

<!-- font awsomw icon link -->

<script

  src="https://kit.fontawesome.com/7b95d0a21f.js"

  crossorigin="anonymous"

></script>

<!-- bootstrap link -->

<link

  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"

  rel="stylesheet"

  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"

  crossorigin="anonymous"

/>

<!-- custom css -->

<link rel="stylesheet" href="CSS/style.css" />
<header>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="container">

      <a class="navbar-brand" href="#"

        >International Convention City Complex</a

      >

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

          <li class="nav-item">

            <a class="nav-link active" aria-current="page" href="#">Home</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">About us</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Contact</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Subscribe</a>

          </li>

        </ul>

      </div>

    </div>

  </nav>

  <!--  slider  -->

  <div

    id="carouselExampleCaptions"

    class="carousel slide mt-3"

    data-bs-ride="carousel"

  >

    <div class="carousel-indicators">

      <button

        type="button"

        data-bs-target="#carouselExampleCaptions"

        data-bs-slide-to="0"

        class="active"

        aria-current="true"

        aria-label="Slide 1"

      ></button>

      <button

        type="button"

        data-bs-target="#carouselExampleCaptions"

        data-bs-slide-to="1"

        aria-label="Slide 2"

      ></button>

      <button

        type="button"

        data-bs-target="#carouselExampleCaptions"

        data-bs-slide-to="2"

        aria-label="Slide 3"

      ></button>

    </div>

    <div class="carousel-inner">

      <div class="carousel-item active">

        <img

          src="images/pexels-photo-2608517_1440x584.jpeg"

          class="d-block w-100"

          alt="..."

        />

        <div class="carousel-caption  d-md-block">

          <h1>LET US MAKE YOUR EVENT AN EXPERIENCE</h1>

          <p>We are pioneer in this business for last 3 decades.</p>

          <div>

            <a

              class="btn btn-light px-5"

              href="https://www.bashundharaconvention.com/"

              role="button"

              >Book Now</a

            >

          </div>

         

        </div>

       

      </div>

      <div class="carousel-item">

        <img

          src="images/pexels-photo-5005252_1440x584.jpeg"

          class="d-block w-100"

          alt="..."

        />

        <div class="carousel-caption d-md-block">

          <h1>YOUR CONNECTION TO FOREVER</h1>

          <p>Best Convention Center in Dhaka.</p>

          <div>

            <a

              class="btn btn-light px-5"

              href="https://www.bashundharaconvention.com/"

              role="button"

              >Book Now</a

            >

          </div>

         

        </div>

       

      </div>

      <div class="carousel-item">

        <img

          src="images/pexels-photo-382297_1_1440x584.jpeg"

          class="d-block w-100"

          alt="..."

        />

        <div class="carousel-caption d-block d-md-block">

          <h1>IT'S TIME TO MAKE YOUR DREAM TRUE</h1>

          <p>Your satisfaction is our top priority.</p>

          <div>

            <a

            class="btn btn-light px-5"

            href="https://www.bashundharaconvention.com/"

            role="button"

            >Book Now</a

         

          </div>

         

        </div>

       

      </div>

    </div>

    <button

      class="carousel-control-prev"

      type="button"

      data-bs-target="#carouselExampleCaptions"

      data-bs-slide="prev"

    >

      <span class="carousel-control-prev-icon" aria-hidden="true"></span>

      <span class="visually-hidden">Previous</span>

    </button>

    <button

      class="carousel-control-next"

      type="button"

      data-bs-target="#carouselExampleCaptions"

      data-bs-slide="next"

    >

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="visually-hidden">Next</span>

    </button>

  </div>

</header>

<main>

  <!-- album section -->

  <section class="container my-5">

    <div class="row">

     <div class="col-lg-6 col-12">

       <img src="images/wedding.png" alt="" srcset="">

     

     </div>

     <div class="col-lg-6 col-12 pt-5">

       <h1>Every moment is.</h1>

       <P>Enjoy the Beautiful Moments of your Special Day by Capturing it with Extravagance The wedding is the most memorable occasion in your life as you are marrying.We are here for that. </P>

     

       <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

        <div class="toast-header">

          <img src="..." class="rounded me-2" alt="...">

          <strong class="me-auto">Bootstrap</strong>

          <small>11 mins ago</small>

          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

        </div>

        <div class="toast-body">

          Hello, world! This is a toast message.

        </div>

      </div>

       

      </div>

       
     

    </div>

  </section>

  <!-- package section -->

  <section class="container my-5">

    <h1 class="text-center mb-5">Our Package</h1>

    <div class="row row-cols-1 row-cols-md-3 row-cols-md-4 g-4">

      <div class="col">

        <div class="card h-100 border-0 mt-5">

          <div class="card-body">

            <h2 class="card-title">$500</h2>

            <h5>Business Conference</h5>

            <p class="card-text">

              Items included in Business Conference package.

            </p>

            <div>

              <p><i class="far fa-check-circle"></i> Function Room</p>

              <p>

                <i class="far fa-check-circle"></i> Built in projectors &

                screen

              </p>

              <p><i class="far fa-check-circle"></i> Vip Parking</p>

              <p>

                <i class="far fa-check-circle"></i> Inclusive of meeting

                amenities

              </p>

              <p>

                <i class="far fa-check-circle"></i> Ample Parking Bays with

                a flat rate</p>

              </p>

              <button type="button" class="btn btn-primary btn-lg ms-4 border rounded-3">Choose Plan</button>

            </div>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card border-0 h-100 mt-5">

          <div class="card-body">

            <h2 class="card-title">$500</h2>

            <h5>Reception</h5>

            <p class="card-text">

              Items included outdoor reception package.

            </p>

            <div>

              <p><i class="far fa-check-circle"></i> Grand pavillion</p>

              <p>

                <i class="far fa-check-circle"></i> Wifi facilities.

               

              </p>

              <p><i class="far fa-check-circle"></i> Car Parking at main entrance</p>

              <p>

                <i class="far fa-check-circle"></i>  Selection of 12 dishes .

               

              </p>

              <p>

                <i class="far fa-check-circle"></i>  Function room for buffet launch.

                </p>

              </p>

              <button type="button" class="btn btn-primary btn-lg ms-4 border rounded-3">Choose Plan</button>

            </div>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card wedding-card">

         <div class="wedding-badge">

          <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">

            New

            <span class="visually-hidden">unread messages</span>

          </span>

         </div>

          <div class="card-body">

            <h2 class="card-title">$800</h2>

            <h5>Indoor Wedding</h5>

            <p class="card-text">

              Items included wedding package.

            </p>

            <div>

              <p><i class="far fa-check-circle"></i> Grand Pavillion.</p>

              <p>

                <i class="far fa-check-circle"></i> Car parking at main entrance.

               

              </p>

              <p><i class="far fa-check-circle"></i> Wifi facility</p>

              <p>

                <i class="far fa-check-circle"></i> Function room for buffet launch/dinner.

               

              </p>

              <p>

                <i class="far fa-check-circle"></i> Selection of 12 dishes

                </p>

              </p>

              <button type="button" class="btn btn-primary btn-lg ms-4 border rounded-3">Choose Plan</button>

            </div>

          </div>

        </div>

      </div>

      <div class="col">

        <div class="card border-0 h-100 mt-5">

          <div class="card-body">

            <h2 class="card-title">$400</h2>

            <h5>Graduation Program</h5>

            <p class="card-text">

              Items included Graduation package.

            </p>

            <div>

              <p><i class="far fa-check-circle"></i> Robing room for lectures</p>

              <p>

                <i class="far fa-check-circle"></i> Built in projectors &

                screen

              </p>

              <p><i class="far fa-check-circle"></i> Vip Parking</p>

              <p>

                <i class="far fa-check-circle"></i> 4 hours rehersal before event.

                amenities

              </p>

              <p>

                <i class="far fa-check-circle"></i> Inclusive of live feed with

                recording</p>

              </p>

              <button type="button" class="btn btn-primary btn-lg ms-4 border rounded-3">Choose Plan</button>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  <!-- FAQ section -->

  <section class="container my-5">

    <div class="row">

      <div class="col-lg-6 col-12 pt-4 order-md-2">

        <img src="images/people.png" alt="" />

      </div>

      <div class="col-lg-6 col-12 order-md-1">

        <div class="accordion accordion-flush" id="accordionFlushExample">

          <div class="accordion-item border rounded-2 my-2">

            <h2 class="accordion-header" id="flush-headingOne">

              <button

                class="accordion-button collapsed"

                type="button"

                data-bs-toggle="collapse"

                data-bs-target="#flush-collapseOne"

                aria-expanded="false"

                aria-controls="flush-collapseOne"

              >

                Is the International Convention City Complex fully

                accessible?

              </button>

            </h2>

            <div

              id="flush-collapseOne"

              class="accordion-collapse collapse"

              aria-labelledby="flush-headingOne"

              data-bs-parent="#accordionFlushExample"

            >

              <div class="accordion-body">

                Yes – we are committed to providing a welcoming and

                inclusive environment for our guests.

              </div>

            </div>

          </div>

          <div class="accordion-item border rounded-2 my-2">

            <h2 class="accordion-header" id="flush-headingTwo">

              <button

                class="accordion-button collapsed"

                type="button"

                data-bs-toggle="collapse"

                data-bs-target="#flush-collapseTwo"

                aria-expanded="false"

                aria-controls="flush-collapseTwo"

              >

                Does the Convention Centre host weddings?

              </button>

            </h2>

            <div

              id="flush-collapseTwo"

              class="accordion-collapse collapse"

              aria-labelledby="flush-headingTwo"

              data-bs-parent="#accordionFlushExample"

            >

              <div class="accordion-body">

                We sure do! We host dozens of weddings annually. Check out

                our Weddings section for spectacular wedding packages which

                include full décor, a fabulous four star meal, late night

                buffet, and an open/host bar. Some of our packages even

                include a complimentary three tier wedding cake. All you

                have to do is show up and have fun!

              </div>

            </div>

          </div>

          <div class="accordion-item border rounded-2 my-2">

            <h2 class="accordion-header" id="flush-headingThree">

              <button

                class="accordion-button collapsed"

                type="button"

                data-bs-toggle="collapse"

                data-bs-target="#flush-collapseThree"

                aria-expanded="false"

                aria-controls="flush-collapseThree"

              >

                Is this for a good venue for family event?

              </button>

            </h2>

            <div

              id="flush-collapseThree"

              class="accordion-collapse collapse"

              aria-labelledby="flush-headingThree"

              data-bs-parent="#accordionFlushExample"

            >

              <div class="accordion-body">

                Yes,family functions with guests ranging from to 700 can be

                hosted here.

              </div>

            </div>

          </div>

          <div class="accordion-item border rounded-2 my-2">

            <h2 class="accordion-header" id="headingThree">

              <button

                class="accordion-button collapsed"

                type="button"

                data-bs-toggle="collapse"

                data-bs-target="#collapseThree"

                aria-expanded="false"

                aria-controls="collapseThree"

              >

                What is the catering policy?

              </button>

            </h2>

            <div

              id="collapseThree"

              class="accordion-collapse collapse"

              aria-labelledby="headingThree"

              data-bs-parent="#accordionExample"

            >

              <div class="accordion-body">Catering is available.</div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  <!-- address and contact section -->

  <section class="container my-5">

    <h1 class ="text-center mb-5">Find US</h1>

  <div class="row d-flex justify-content-end">

    <div class="col-lg-6 col-12">

     <div class="ms-2">

      <p>Address: Police Plaza Concord, (Beside Shooting Complex), Gulshan-1 Dhaka, Bangladesh</p>

      <p>Telephone: 031654897 </p>

      <p>email:hddr@gmail.com  </p>

     </div>

    </div>

    <div class="col-lg-6 col-12">

     <div class="d-flex justify-content-end">

      <form>

        <div>

          <label for="exampleInputEmail1" class="form-label">First Name</label>

          <input type="name" class="form-control w-100" placeholder="First Name">

       

        </div>

        <div class="mb-3">

          <label for="exampleInputPassword1" class="form-label">Last name</label>

          <input type="name" class="form-control w-100" placeholder="Last Name">

        </div>

        <div class="mb-3">

          <label for="exampleInputPassword1" class="form-label">Mobile Number</label>

          <input type="name" class="form-control w-100" placeholder="Mobile Number" >

        </div>

        <div class="mb-3">

          <label for="exampleFormControlTextarea1" class="form-label">Your message</label>

          <textarea class="form-control w-100" id="exampleFormControlTextarea1" rows="3"></textarea>

        </div>

       

        <button type="submit" class="btn btn-primary">Book Now</button>

      </form>

     </div>

    </div>

  </div>

  </section>

 

</main>

<!-- footer section -->

<footer>

  <section class="bg-dark  w-100 ">

    <div class="row d-flex align-items-center py-3">

      <div class="col-lg-3 col-12 order-md-2 text-center">

        <h5 class="text-white">Get the App</h5>

        <div>

          <a href="https://www.apple.com/app-store/">

            <img src="images/apple.png" alt="" srcset="" />

          </a>

        </div>

        <div>

          <a href="https://play.google.com/store/apps">

            <img src="images/google.png" alt="" />

          </a>

        </div>

      </div>

      <div class="col-lg-9 col-12 order-md-1 text-center mt-sm-2">

        <p class="text-white mx-auto pt-3">

          &copy 2022 Somen Singha.All rights reserved

        </p>

      </div>

    </div>

  </section>

</footer>

<script

  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"

  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

  crossorigin="anonymous"

></script>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.