Menu
I want to make a responsive card deck using Bootstrap 4 fixed-width cards. Here I have posted the code below, but it's not responsive. Why?
<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 1</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 2</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 3</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 4</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
888
For a Bootstrap 4 card deck with fixed-width cards, do this: Put each card into a column with the classes col-auto mb-3 (auto-width column + margin-bottom with three units). To center them, add the justify-content-center class to the row. The problem with this is that cards will have different heights.
Another way to make a responsive card-deck, is using responsive reset divs every x columns. This will force cards to wrap at specific breakpoints. For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc.. The link to the responsive cards using grid doesn't quite work.
Card title To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.
To set the width of something, you can use the width property: width: 500px; width: 50%; width: 50vw; There are different units you can use, such as px (pixels) % (percentage of page width) and vw (percentage of window width).
For a Bootstrap 4 card deck with fixed-width cards, do this:
Put each card into a column with the classes col-auto mb-3 (auto-width column + margin-bottom with three units).
To center them, add the justify-content-center class to the row.
Here's a working code snippet (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>In here it is mentioned, these layout options are not yet responsive. So I have found a simple solution. Change the parent <div class="card-deck">...</div> to <div class="row">...</div>.
42
Deck makes cards equal height.
Adding a row-deleting deck was correct. Adding col-lg-3 col-md-2 col-sm-12 will give a four-cards desktop, etc. down to one on a phone.
Set the height using the height of the largest number so an "OK" looks straight.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
