I having a hard time with a simple problem: aligning a card group using Bootstrap. Cant get it to center or at least flush right so that it wont cover my left sidebar.
<div class="row row-cols-1 row-cols-md-5 g-8">
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<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>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<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>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<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.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<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>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated!!!
Blessings,
Meka
Related
I want to align the "demo" and "github" button group to the bottom left of the card, I don't want it to move with the amount of text written in tag. Please help. I am using HTML, CSS, and Bootstrap 5.
I did try vertical alignment, and justify content but, maybe I used it wrong. Please help.
The photoshopped image below is the where I want the 'demo' and 'github' button group to be placed irrespective of the length of content in <p> tag
Here is my code
With the footer
You just need to utilize the .card-footer, see card layout section of the docs.
Here is an example using .card-footer.bg-white.border-0 as a wrapper around your .btn-group:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row row-cols-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<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>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
</div>
I'm trying to create a space between two cards, but I can't seem to figure it out. This is what I have right now:
<div class="container-fluid d-flex justify-content-center">
<div class="row d-flex align-items-center" id="recentDiv">
<div class="col-6 card bg-dark text-white recentPost">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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">Last updated 3 mins ago</p>
</div>
</div>
<div class="col-6 card bg-dark text-white recentPost">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
How about using a CSS grid wihthin Bootstrap. Apply g-grid gap-3 to the parent div. With gap-{x} you can decide how big the gaps will be.
On the children instead of col-6 use g-col-6.
Note: I've used some dummy images to illustrate what it would look like.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="container-fluid d-flex justify-content-center">
<div class="g-grid gap-3 d-flex align-items-center" id="recentDiv">
<div class="g-col-6 card bg-dark text-white recentPost">
<img class="card-img" src="https://dummyimage.com/400x200/000/f0f" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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">Last updated 3 mins ago</p>
</div>
</div>
<div class="g-col-6 card bg-dark text-white recentPost">
<img class="card-img" src="https://dummyimage.com/400x200/000/f0f" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
You might need to do some adjustments so it looks good with your images but the general approach should work.
The Bootstrap documentation references this. Basically, add .gx-{n} to your .row element, where {n} is 0-5. So gx-1, gx-2, etc.
I'm trying to size the cards deck, I have 3 cards and I'm trying to adjust them to be col-3 but it didn't work, I'm using bootstrap 4.1x version I don't know what's wrong in my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck" style="margin-bottom: 20px;">
<div class="card col-sm-3">
<img class="card-img-top" src="https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
<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-sm-3">
<img class="card-img-top" src="https://images.pexels.com/photos/2277784/pexels-photo-2277784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
<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-sm-3">
<img class="card-img-top" src="https://images.pexels.com/photos/1181605/pexels-photo-1181605.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-circle">
</div>
you can use different col for different resolutions
class="card col-sm-4 col-md-4 col-lg-4"
and you are showing only 3 cards in a row so if you multiply with 4 you will get 12 which is maximum col value so it will display equally on your page.
try col-sm-4 if you are trying to display the cards with equal width on the page.
also can you elaborate on what exactly the issue is?
Need to align all height images inside a card-deck on bootstrap 4 without adjusting it via height since the responsive works fine alredy.
I attached a snippet where you can see my problem, cards are all same height but not the image, I know this question was asked before but couldn't find a good solution for that.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
<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">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
<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">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
<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">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
<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>
</div>
</div>
</div>
</body>
</html>
I think you should put all images inside a div tag. Then just assign same height to that one.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="my-auto" style="height: 100%">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
</div>
<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">
<div class="my-auto" style="height: 100%">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="..."></div>
<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">
<div class="my-auto" style="height: 100%">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</div>
<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">
<div class="my-auto" style="height: 100%">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
</div>
<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>
</div>
</div>
</div>
</body>
</html>
And it's better to design all the images in same height. It may solve your problem
If you need to align images in the same height, then all images should be the same width and height. 'or' we can also align those my below:
$(document).ready(function(){
$('.card-deck .card').each(function(){
var img_src = $(this).find(".card-img img").attr("src");
$(this).find(".card-img").attr('style','background-image:url('+img_src+');');
});
});
.card-deck .card .card-img {
background-size:cover;
background-position:top center;
height:120px;
}
.card-deck .card .card-img img{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
</div>
<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>
</div>
</div>
</div>
</body>
</html>
As i mentioned its done by giving that image as background images..shown in above example
Please check with above code.... let me know if you need any changes
Try this code..
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
<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">
<div class="image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP);"></div>
<img src="" class="card-img-top" alt="...">
<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">
<div class="image" style="background-image: url(https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg);"></div>
<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">
<div class="image" style="background-image: url(https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000);"></div>
<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>
</div>
</div>
</div>
</body>
css
.card .image {
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 66.6%;
background-position: center;
}
If you don't need aspect ratio for image, you can use this code in your css:
.card-img-top: {height:250px}
try this with height!
.card-img{
overflow:hidden;
display:flex;
height:200px;
justify-content:center
}
.card-img img{
height:100%;
width:auto
}
#media(max-width:568px){
.card-img{
height:auto
}
.card-img img{
height:auto !important;
width:100%;
}
}
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
</div>
<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">
<div class="card-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="..."></div>
<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">
<div class="card-img"><img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="..."></div>
<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">
<div class="card-img"><img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="..."></div>
<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>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
<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">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
<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">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
<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">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
<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>
</div>
</div>
</div>
</body>
<script>
//If using jquery
var imageWidth = $('.card-img-top').width();
$('.card-img-top').css('height', imageWidth + 'px');
//If using javascript
var imageWidth = document.getElementsByClassName('card-img-top');
for(var i=0; i<imageWidth.length;i++){
imageWidth[i].style.height = imageWidth[i].width + "px";
}
</script>
</html>
Hope the code below helps. I added a figure tag with a thumb_container class to wrap the img tags.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
figure.thumb_container{
margin: 0 0 1rem;
padding: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: auto;
background: transparent;
overflow: hidden;
position: relative;
padding-top: 100%;
}
img {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: block;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-12">
<div class="card-deck">
<div class="card">
<figure class="thumb_container">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="...">
</figure>
<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">
<figure class="thumb_container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2QWzz0XPxgLu05I1BlN_eOMcxrOfFiQxAoGA_ICSouwnLOVbP" class="card-img-top" alt="...">
</figure>
<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">
<figure class="thumb_container">
<img src="https://assets.afcdn.com/story/20180709/1258610_w767h767c1cx304cy194.jpg" class="card-img-top" alt="...">
</figure>
<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">
<figure class="thumb_container">
<img src="https://www.aspinallfoundation.org/media/4231/img_2071.jpg?center=0.40740740740740738,0.57608695652173914&mode=crop&quality=75&width=768&height=412&rnd=132022209070000000" class="card-img-top" alt="...">
</figure>
<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>
</div>
</div>
</body>
</html>
I have a card-deck where I would like to keep the same adaptive width. The issue is that when "rows of cards" that can handle 3 cards, using 5 cards will left the two remaining cards taking the whole width of the container.
What it should look like (iPad example)
What it look like (iPad example)
Here is the same issue on a widescreen : https://i.imgur.com/zJtXhTl.png
The code (5 cards example)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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 mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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="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="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</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-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
<div class="w-100 d-none d-xl-block"><!-- wrap every 4 on xl--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
</div>
I saw this https://github.com/twbs/bootstrap/issues/19650 and tried using
.card {
width: initial;
}
but no luck.
As explained in the docs, card-deck's aren't yet responsive so it's going to be hard to get the desired layout without a lot of extra CSS. This is because of the way the flexbox children (cards) grow in width.
Use full height cards in the grid instead...
<div class="row">
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
.... (more columns with cards)
</div>
https://www.codeply.com/go/hs12dUxHnQ