Having encountered challenges with displaying cards in a bootstrap carousel, I am seeking assistance. To view my current (incomplete) project, please refer to the CodePen link below. https://codepen.io/robbiecorcoran/pen/eYMVvEN
<!-- SEEKING ASSISTANCE -->
<div class="pt-lg-12 pb-lg-3 pt-8 pb-6">
<div class="container">
<div class="mb-4 row">
<div class="col">
<h2 class="mb-0 mx-2 mt-5">Looking for help</h2>
</div>
</div>
<div id="carouselExampleControls" class="carousel" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- GRAPHQL -->
<div class="carousel-item active">
<div class="card d-flex row justify-content-center" style="width: 18rem;">
<img src="https://geeks-react.netlify.app/static/media/course-graphql.f5dec42e4ae0102ebffa.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">GraphQL: Introduction to GraphQL for beginners</h5>
<ul class="mb-3 list-inline">
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg> 2h 40m
</li>
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
</svg> Advance
</li>
</ul>
</div>
</div>
</div>
<!-- ADDITIONAL CARDS OMITTED FOR BREVITY -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829e829c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous">
</script>
I am striving to showcase 4 cards on desktop, 2 on tablet, and 1 on mobile devices, but tackling the task has proven challenging.
Your assistance is highly valued!