Currently enrolled in Angela Yu's Web Development Course, I am delving into Bootstrap carousels. After successfully testing the code on Codeply, I transferred it to my own HTML document only to find that the next and previous buttons were no longer functional. Visually, they appeared distorted with strange borders and backgrounds. Despite consulting the Bootstrap documentation, I couldn't pinpoint the cause of this issue. Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- jQuery -->
...
<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">
...
</button>
</div>
</section>
</body>
body {
...
}
h1 {
...
}
h2 {
...
}
.container-fluid {
...
}
...
https://i.sstatic.net/FJv2J.png
Edit: The issue stemmed from using Bootstrap 4 code with Bootstrap 5 implementation. Resolved now.