I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforward practice, but I have encountered a hurdle. I have shared the entire HTML document, and while the functionality is working fine, I don't think the issue lies with the boostrap.css link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="" content="Trey's Personal Website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trey Coggins | Personal Website</title>
<script type="text/javascript" src="script/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/index-style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="">Trey Coggins</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/bricks.jpg" alt="">
<div class="carousel-caption">
<h2>Let's build something together!</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/woods.jpg" alt="">
<div class="carousel-caption">
<h2>Take a walk in the woods</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/stone.jpg" alt="">
<div class="carousel-caption">
<h2>Elevate yourself to the next level</h2>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<img class="rounded-circle" src="img/trey-court-headshot.jpg" alt="Trey & Courtney">
<h2>Trey & Courtney</h2>
<p>She's the love of my life!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/tootsie-smile.jpg" alt="Mama Tootsie">
<h2>Bodhi & Tootsie</h2>
<p>These two keep us young!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/royal-hearts.jpg" alt="Royal Flush">
<h2>Poker</h2>
<p>Join the action!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
</div>
</div>
</body>
</html>