For some reason, when I try to use Bootstrap 4's card columns, the height of the shorter card will end up stretching to be equal with the one beside it. This only happens if I apply the 'row' class to the parent div. However, if I remove the 'row' class, the cards stack on top of each other in Chrome (this is a known bug, though I haven't found another solution to it yet) and don't stack on a smaller screen size in Safari. The other issue I've encountered is that if I apply 100% height to the cards, they won't stretch, but the card underneath it won't come up closer to the one above it so there's a big gap.
I thought the point of using card columns in this way was to achieve the Masonry look, but it doesn't seem to be behaving that way for me. I'm guessing it may have something to do with the flexbox properties on the 'row' class, but it seems like I need that in order for them to be laid out side by side in 2 columns.
Below is my code. Let me know if any of you have a solution to this. Thank you in advance!
.row {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
margin-right: 30px;
margin-left: 30px;
}
.card-columns .card {
width: 320px !important;
display: inline-block !important;
height: auto;
}
.card-columns {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-columns row">
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
</div>
</div>
FluffyKitten :
You just need 2 changes to make it work.\n\nDon't set a fixed width on your cards - that will break the responsiveness and that's why they're not displaying properly (overlapping or stacking) on some screens.\n\nYou don't need to use row because you are using card-columns - see the Bootstrap Documentation for Card Columns.\n\n\n(You also don't need to set display:inline-block or height:auto for `.card-columns .card, but that is not what is causing the problem as it will work with them.)\nYou can see the working code in the snippet below:\n\r\n\r\n.card-columns {\n -webkit-column-count: 2 !important;\n -moz-column-count: 2 !important;\n column-count: 2 !important;\n -webkit-column-gap: 1.25rem;\n -moz-column-gap: 1.25rem;\n column-gap: 1.25rem\n}\r\n<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" rel=\"stylesheet\"/>\n<div class=\"container\">\n <div class=\"card-columns\">\n <div class=\"d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6\">TITLE</h3>\n <p class=\"lead-portfolio\">Some text</p>\n </div>\n </div>\n \n <div class=\"d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6-dark\">TITLE</h3>\n <p class=\"lead-portfolio-dark\">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>\n </div>\n </div>\n <div class=\"d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6\">TITLE</h3>\n <p class=\"lead-portfolio\">Some text</p>\n </div>\n </div>\n \n <div class=\"d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6-dark\">TITLE</h3>\n <p class=\"lead-portfolio-dark\">Some text</p>\n </div>\n </div>\n <div class=\"d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6\">TITLE</h3>\n <p class=\"lead-portfolio\">Some text</p>\n </div>\n </div>\n \n <div class=\"d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6-dark\">TITLE</h3>\n <p class=\"lead-portfolio-dark\">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>\n </div>\n </div>\n <div class=\"d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6\">TITLE</h3>\n <p class=\"lead-portfolio\">Some text</p>\n </div>\n </div>\n \n <div class=\"d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6-dark\">TITLE</h3>\n <p class=\"lead-portfolio-dark\">Some text</p>\n </div>\n </div>\n <div class=\"d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6\">TITLE TITLE TITLE TITLE TITLE TITLE TITLE</h3>\n <p class=\"lead-portfolio\">Some text</p>\n </div>\n </div>\n \n <div class=\"d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered\">\n <div class=\"my-3 p-3\">\n <h3 class=\"display-6-dark\">TITLE</h3>\n <p class=\"lead-portfolio-dark\">Some text</p>\n </div>\n </div>\n </div>\n </div>",
2020-08-12T07:18:23
More about “Bootstrap 4 card height stretching” related questions