I have been working on creating a User Projects section, and I wanted to display the projects in a carousel format. However, when I tried to import Bootstrap carousels, my items suddenly disappeared. Since I am coding on a tablet and not a computer, I am not entirely sure if I closed the divs properly. Can anyone provide assistance, please? Below is a snippet of my code:
<div class="userProjects" id="userProjects"> <!--line number: 126-->
<h1> User Projects </h2> <!--line number: 173-->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="clockImg">
<img class="rounded clockSS" src="" alt="JS Clock"> <!--line number: 165-->
</div>
<h2> JavaScript Clock </h2>
<p class="lead leadTwo"> One of the very first projects that he recommends is a simple, easy to make JavaScript clock.
</p> <!--line number: 180-->
</div> <!--fadeInUserProjects div closing...-->
</div>
</div>
</div>
</div>
</div>
I apologize for the poor indentation. I also made some modifications to the Bootstrap CSS in an attempt to fix the issue:
.carousel-inner,
.carousel-item {
width: 100vw;
position: absolute;
left: -20%;
height: 180%;
color: white;
}