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>
Related
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 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
I have a Bootstrap carousel on my web page, but the carousel will only display one card at a time. I need it to display 3 cards at a time. Also, for some reason the arrows are not displaying correctly either. I tried using alternative icons as well. I can find them and click on them with my mouse, but visually they don't display. My main concern for this question is the card display. Any additional insight for the arrows would just be a bonus.
Code for my carousel:
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="col-sm-10">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for project in projects %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<div class="col-md-3 d-flex">
<div class="shadow card mb-2">
<img class="card-img-top" src="{% static project.image %}">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description | slice:":100"}}...</p>
</div>
<div class="card-body">
<a href="{% url 'project_detail' project.pk %}"
class="btn btn-primary">
Read More
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-sm-1">
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What it looks like in browser:
You can use the owl carousel for your card. You can insert your card (HTML)and configure the number the items you need to display according to your requirement in the JS file. The owl carousel is responsive and compatible with various browsers as well.
The link for the JS fiddle is as follows.
https://jsfiddle.net/hilalrehan/2x5jrewp/25/
HTML
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<link href ="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">
<div class="container ">
<div class="row">
<div class="col-12">
<div class="owl-carousel ">
<div class="card" style="width: 18rem;">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="container ">
<div class="row">
<div class="col-12">
<div class="owl-carousel ">
<div class="card" style="width: 18rem;">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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" style="width: 18rem;">
<img class="card-img-top" src="..." 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 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>
You can use margin and items to configure the display according to your requirement. In this example, one item is shown in the range of 0px to 768px resolution. You can change the number of items display according to your requirement.
JS
$(".owl-carousel").owlCarousel({
responsiveClass: true,
dots: true,
dotsContainer: false,
loop: true,
autoWidth: true,
autoplay:true,
nav:true,
smartSpeed:1000,
items:3,
responsive: {
0: {
items:1,
margin: 150,
center: true
},
768: {
items:3,
margin:200,
center: false
},
992: {
items:3,
margin: 35,
center: true
},
1200: {
items:3,
margin:250,
center: true
},
},
});
Add following CSS
.owl-nav {
text-align: center;
}
If you need any further help regarding the documentation of the owl carousel, please refer to the following documentation.
https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
I'm using bootstrap 4 to display cards. All is working as expected. The issue I have is that if one of the footers has more content than the others, the footer is raised to accommodate this. Is there a way of the footer pushing the content down and keeping the tops aligned?
DEMO: http://jsfiddle.net/6uv9a30n/1/
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Current Output:
Desired Output:
This is going to be sound cheap but you can use another small HTML tag having css property transparent color so that it will always remain on top not matter how much text you add.
<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">
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small style="color: transparent;">Text not going to show</small>
</div>
</div>
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small style="color: transparent;">Text not going to show</small>
</div>
</div>
</div>
</div>
You can do it with the flex CSS property on card-body and card-footer.
body {
margin: 10px;
}
/* Customize Bootstrap card */
.card-deck .card-body {
flex: 0 0 auto;
}
/* fix footer height */
.card-footer {
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer equal">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<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 lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
I am using bootstrap 4 beta.
I have a list of cards. I want them to be of fixed width, but the height will be variable depending on the content.
The number of cards can be from 1 to n.
The effect I want is for the cards to be be laid out from left to right until screen space runs out, then wrap to next line.
I have tried all the different options listed on the bootstrap 4 example page for cards, but they don't seem to wrap.
How can I achieve this?
The below example shows them 3 across, with a lot of space between them.
<div class="card-columns">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">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="card"style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<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" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<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" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">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="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<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" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<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>
After working with this for some time, the floating solution I came up with was unsatisfactory as in some cases, there was a large amount of space below some cards.. After reviewing bootstrap 4 cards, I found a feature that does exactly what I wanted it to: "card-columns"
It lines up your cards into three columns, and re-arranges to one column when the screen size is small.
Bootstrap Docs on card-columns
I came up with a floating-card class that works:
<style>
.floating-card {
float: left;
margin: 5px;
max-width: 300px;
}
</style>
Example usage:
<div class="floating-card sortable">
<section class="box-typical task-card task">
<div class="task-card-photo">
<img src="img/img-task.jpg" alt="">
</div>
<div class="task-card-in">
<div class="btn-group task-card-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="font-icon-dots-vert-square"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
</div>
</div>
<div class="task-card-title">
Create new webpage for sales and marketing stuff
<span class="task-card-title-label">(BIG)</span>
</div>
<div class="progress-compact-style">
<progress class="progress" value="25" max="100">
<div class="progress">
<span class="progress-bar" style="width: 25%;">25%</span>
</div>
</progress>
<div class="progress-compact-style-label">37% done</div>
</div>
<div class="task-card-tags">
Default
Primary
Success
</div>
</div>
<div class="task-card-footer">
<div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
<div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
<div class="avatar-preview avatar-preview-32">
<a href="#">
<img src="img/photo-64-2.jpg" alt="">
</a>
</div>
</div>
</section><!--.task-card-->
</div>
Here the solution...
use bootstrap row and col's to acheive this, please follow below code.
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">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>
Here's some code you can play with, based on Srikanth's suggestion. You can adjust the class="col-lg-3 col-md-4 col-sm-6 to have more or less cards display based on the width of your browser. I've also included a width display to show the pixels width.
Of course adjust the php loop quantity to test more or less number of cards.
<body>
<center>Width: <span id="width"></span></center>
<br>
<div class="container">
<div class="row">
<?php
for ($x = 0; $x <= 10; $x++) {
$card = <<<EOF
<div class="col-lg-3 col-md-4 col-sm-6" style="margin-bottom:10px;">
<div class="card">
<img class="card-img-top" src="your_image.jpg" alt="Card image cap">
<div class="card-block" style="margin:5px;">
<h4 class="card-title">Card title {$x}</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>
<center class="link">Join</center>
</div>
</div>
</div>
EOF;
echo $card;
}
?>
</div>
</div>
<script>
$(window).resize(function() {
var viewportWidth = $(window).width();
$('#width').html(viewportWidth);
});
</script>
</body>
With version 5.1 Bootstrap has moved away from the CSS technique used in version 4. Here they provide an example how to make use of the Masonry plugin, see this snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
</head>
<body>
<main class="container py-5">
<h1>Bootstrap and Masonry</h1>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</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-sm-6 col-lg-4 mb-4">
<div class="card p-3">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<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>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white text-center p-3">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3 text-end">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>