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">
© 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>