Bootstrap 4 - Responsive cards in card-columns
Bootstrap 4 (4.0.0-alpha.2) uses the css property column-count in the card-columns class to define how many columns of cards would be displayed inside the div element.
But this property has only two values:
- The default value 1 for small screens (
max-width: 34em) - The value 3 for all other sizes (
min-width: 34em)
Here's how it is implemented in bootstrap.min.css :
@media (min-width: 34em) {
.card-columns {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
⋮
}
⋮
}
To make the card stacking responsive, you can add the following media queries to your css file and modify the values for min-width as per your requirements :
@media (min-width: 34em) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 48em) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media (min-width: 62em) {
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 75em) {
.card-columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
Bootstrap 4 cards responsive with same height on multiple rows
How about adding style="height: 200px; max-height: 200px; overflow-y: auto;" to all the divs with the class of card-body
Here's the code:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<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>
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
<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>
<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>
<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>
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</section>
This will make all the rows of the same height.
Bootstrap 4 responsive card columns with equal height cards
Did something, I hope this is what you were looking for
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-content-stretch flex-wrap card-columns-group">
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in ting text below as a natural lead-in ting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Bootstrap Cards not working correctly with columns
Change the class col on your first div for row. After that, you can add your card in some columns and have them disposed side by side on a larger screen with col-md-x, col-lg-x and col-xl-x.
It's the same thing for the content in your card. Group the content in a div with the class row and group each section of your content in some columns.
Here is more information about the Bootstrap Grid System
Here is en example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class='row'>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class='card h-100'>
<div class='row'>
<div class='col-md-12 col-4'>
<img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-md-12 col-8'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>Bootstrap 4 card-deck with number of columns based on viewport
Updated 2018
If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...
Bootstrap 4 responsive card-deck (v 4.1)
Original answer for Bootstrap 4 alpha 2:
You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox.
.row > div[class*='col-'] {
display: flex;
flex:1 0 auto;
}
http://codeply.com/go/O0KdSG2YX2 (alpha 2)
The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk
Related question:
Bootstrap 4 - Responsive cards in card-columns
Bootstrap 4 card-columns width
It's basically the same issue as explained here. In Bootstrap each breakpoint defines a different number of columns across. That's why it goes to 1 column on small screens in the fiddle. So, if you want to change it to always be 1 column across you can use CSS, but this will effect the entire group of card columns, not just a single card.
.card-columns {
column-count: 1;
}
https://codeply.com/go/PKwviFqstk
Also see: Is there a way to specify different widths for columns in CSS3?
Bootstrap Responsive Cards
you should use Grid System to split screen as you want
and your code after implement this approach :
<div class="container">
<div class="row">
<div class="col">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">2 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">3 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col">
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">4 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
Related Topics
Align the Form to the Center in Bootstrap 4
R Web Scraping Across Multiple Pages
White Space Inside Xml/HTML Tags
HTML Class Attribute with Spaces, It Is a W3C Valid Class
How to Style a File Input Field in Firefox
5 Items Per Row, Auto-Resize Items in Flexbox
Correct Semantics for Ul in Ul
Pixelated Edge Around a CSS Circle with Overflow: Hidden;
Why Does File Upload Not Work Without the Enctype Property
What Happens If the Meta Tags Are Present in the Document Body
Auto Height on Parent Container with Absolute/Fixed Children
HTML <Base> Tag and Local Folder Path with Internet Explorer
Restrict File Upload Selection to Specific Types
File Url "Not Allowed to Load Local Resource" in the Internet Browser
HTML <Input Type='File'> Apply a Filter
Linking to CSS in an Svg Embedded by an Img Tag
Is It Semantically Incorrect to Put a <Div> or <Span> Inside of a <Button>