I'm currently working on Angela Yu Web Development Course and I'm learning Bootstrap carousels. I wrote the code and ran it on Codeply and it worked fine. Then I implemented the code according to my own HTML and next or previous buttons are not functional anymore. They also look "wrong" visually with strange borders and backgrounds. I double checked the Bootstrap documentation and couldn't find why this was happening. Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<!-- External CSS -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&family=Montserrat:wght@300;400;700;900&family=Open+Sans:wght@400;700&family=Ubuntu:wght@400;700&display=swap"
rel="stylesheet">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/3f441d9c50.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2> I no longer have to sniff other dogs for love. I've found the hottest Corgi on
TinDog. Woof. </h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile" />
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've
found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" 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="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
body {
font-family: "Montserrat", sans-serif;
}
h1 {
font-family: "Montserrat", sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1.5;
}
h2 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 3rem;
line-height: 1.5;
}
.container-fluid {
padding: 0 15%;
}
/* Features section */
#features {
padding: 7% 15%;
}
.features-box {
text-align: center;
padding: 5%;
}
.features-h3 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 1.5rem;
}
.features-p {
color: #8f8f8f;
}
.features-icon {
color: #a38a5c;
font-size: 3rem;
margin-bottom: 1rem;
}
.features-icon:hover {
color: #985d0f;
}
/*
.features-container {
margin: 0 5%;
} */
#slogan-h1 {
padding-bottom: 4rem;
}
#title {
background: url(https://i.ibb.co/vVpW8H1/gold-bg-canva.png) no-repeat;
width: auto;
height: 900px;
color: #fff;
border-bottom: outset white 5px;
/* golden themed color
color: #a38a5c; */
}
/* Navigation Bar */
.navbar-brand {
font-family: "Jost", sans-serif;
font-weight: 400;
/* These are not functional because I used logo instead of text. */
}
.navbar {
align-items: start;
padding-bottom: 4.5rem;
}
.navbar-content-div {
margin-top: 1rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat", sans-serif;
font-weight: 300;
}
#my-navbar-container {
padding: 1% 3%;
}
/* Download buttons */
.title-button {
margin-bottom: 2rem;
}
.title-button-grid {
margin-right: 10%;
}
/* Testimonial Section */
#testimonials {
padding: 7% 15%;
text-align: center;
background: rgba(163, 138, 92, 1);
color: #fff;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background: rgba(163, 138, 92, 1);
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 10%;
margin: 20px 20px 50px;
}
Edit: The problem was that I was trying to load Bootstrap 4 but writing the HTML code for Bootstrap 5. It's solved now.