Robbie Corcoran
Reputation: 3
Problem with cards in a carousel (Bootstrap)
I'm having an issue with cards in a bootstrap carousel. Please see the below CodePen link with my current (very unfinished) project. https://codepen.io/robbiecorcoran/pen/eYMVvEN
<!-- RECOMMENDED -->
<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">Recommended for you</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>
<ul class="list-inline">
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#ffd700" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</li>
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#ffd700" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</li>
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#ffd700" class="bi bi-star-half" viewBox="0 0 16 16">
<path d="M5.354 5.119 7.538.792A.516.516 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.537.537 0 0 1 16 6.32a.548.548 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.52.52 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.58.58 0 0 1 .085-.302.513.513 0 0 1 .37-.245l4.898-.696zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.565.565 0 0 1 .162-.505l2.907-2.77-4.052-.576a.525.525 0 0 1-.393-.288L8.001 2.223 8 2.226v9.8z"/>
</svg>
</li>
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#ffd700" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
</li>
<li class="list-inline-item">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#ffd700" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
</li>
<li class="list-inline-item" style="color: #ffd700;">
<div class="fw-light">2.5</div>
</li>
<li class="list-inline-item">
<div class="fw-light">(1,500)</div>
</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">
<div class="fw-bold">$500</div>
</li>
<li class="list-inline-item">
<div class="fw-light text-decoration-line-through">$600</div>
</li>
</ul>
</div>
<div class="card-footer">
<div class="align-items-center g-0 row">
<div class="col-auto col">
<img src="https://geeks-react.netlify.app/static/media/avatar-6.3905522d6589ed6dfcf0.jpg" alt="" class="rounded-circle avatar-xs">
</div>
<div class="col-ms-2 col ps-3">
<span>Brooklyn Simmons</span>
</div>
<div class="col-auto col">
<a class="bookmark" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item active col-3">
<div class="card d-flex rowjustify-content-center" style="width: 18rem;">
<img src="https://geeks-react.netlify.app/static/media/course-javascript.8afdeff32816e30422da.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="carousel-item col-3">
<div class="card d-flex justify-content-center" style="width: 18rem;">
<img src="https://geeks-react.netlify.app/static/media/course-node.291fe1cded8ebab181ab.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="carousel-item col-3">
<div class="card d-flex justify-content-center" style="width: 18rem;">
<img src="https://geeks-react.netlify.app/static/media/course-laravel.48ab426cd3f0adc40dd9.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="carousel-item col-3">
<div class="card d-flex justify-content-center" style="width: 18rem;">
<img src="https://geeks-react.netlify.app/static/media/course-react.999d5d4b7ef4771200c2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous">
</script>
I'm trying to display 4 cards on a desktop, 2 cards on a tablet, and 1 on a mobile, but I cannot figure it out.
Any help is appreciated!
Upvotes: 0
Views: 482
Answers (1)
Jay
Reputation: 26
will probably need to use CSS media queries.
Something like
@media only screen and (max-width: 480px) { /* modile */
body {
background-color: lightblue;
}
}
Ref : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Upvotes: 1
Related Questions
- Bootstrap 4.4.1 Card carousel does not work
- Bootstrap Cards carousel with php
- How to align cards in carousel - Bootstrap 5?
- Bootstrap 5: Carousel inside Card won't maintain the same size
- Bootstrap carousel, card with text on top
- Bootstrap Carousel cards to be positioned from bottom to top
- Carousel of cards
- Problem with the carousel on Bootstrap v4.5.0
- Display issue of card in carousel (Bootstrap)
- Multiple carousel's in cards not working bootstrap v4