I have a small issue with card-decks in Bootstrap 4 Alpha-6. When the cards are wrapping around because the screen is not wide enough to make room for all the cards in the deck, the 1. card on "next line" is not left-justified but has a narrow left margin.
is it a Aplha-6 bug to be fixed?, if anyone has a solution please let me know. Thanks in advance.
.card {
background: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
[class*="row"] {
margin-bottom: 1em;
justify-content: center;
}
[class*="col-"] {
background: #efefef;
border: 1px solid #ddd;
padding-top: .75rem;
padding-bottom: .75rem;
width: 100%;
}
<div class="container-fluid">
<div class="row" style="margin: 10px">
<div class="card-deck">
<div class="card">
<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">
<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">
<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">
<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">
<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>
</div>
</div>
Related
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>
Check this codeply. Unless I missed a gotcha somewhere in the doc, I should be able to manually via css set the width of card elements. I am using the cards within card-deck but if that is what's messing this up, again there's nothing in the docs about it...
Anyway, as you can see from the codeply, the width appears to be completely ignored... even though upon element inspection it shows correctly, the final computed value is very different.
For example on a large screen, all 6 cards show upon 1 row, disobeying the width: 25%. On small screens, 1 card does take up 50%, but the next card is bumped to the next row, rather than 2 side by side
<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">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 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">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="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">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 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">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 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">5 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 mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">6 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>
.card {
width: 50%;
}
#media (min-width: 768px) {
.card {
width: 33%;
}
}
#media (min-width: 1200px) {
.card {
width: 25%;
}
}
At this point width property will not for .card-deck .card. You have to write width using flex-basis and max-width. Code is below.
.card {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
}
#media (min-width: 576px){
.card {
flex-basis: calc(50% - 30px); /* Remove margin from total card width */
flex-grow: 0;
flex-shrink: 0;
max-width: calc(50% - 30px); /* Remove margin from total card width */
}
}
#media (min-width: 768px) {
.card {
flex-basis: calc(33.3333% - 30px); /* Remove margin from total card width */
max-width: calc(33.3333% - 30px); /* Remove margin from total card width */
}
}
#media (min-width: 1200px) {
.card {
flex-basis: calc(25% - 30px); /* Remove margin from total card width */
max-width: calc(25% - 30px); /* Remove margin from total card width */
}
}
Bootstrap set .card-deck .card css property margin-left: 15px;margin-right: 15px; that why card isn't going full width. At this point need to remove margin width from total card width.
Here is the pen.
It will not good because bootstrap card design is difference. You have to change html for above design it will no need to use custom css property.
Here is the pen.
Edited
Bootstrap remove margin from .card class if window width less than or equal to 575.98px Same for .card-deck class remove display: flex;flex-flow: row wrap;. If you want two cards in per row in small devices. Do like this.
.card {
flex-basis: calc(50% - 30px);
flex-grow: 0;
flex-shrink: 0;
margin-left: 15px;
margin-right: 15px;
max-width: calc(50% - 30px);
}
Add d-flex flex-wrap class with card-deck.
<div class="card-deck d-flex flex-wrap"></div>
I update the pen. Below is complete HTML and CSS code.
<div class="container">
<div class="card-deck d-flex flex-wrap">
<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">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 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">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="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">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 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">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 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">5 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 mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">6 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>
CSS
.card-deck .card {
flex-basis: calc(50% - 30px);
flex-grow: 0;
flex-shrink: 0;
margin-left: 15px;
margin-right: 15px;
max-width: calc(50% - 30px);
}
#media (min-width: 768px) {
.card-deck .card {
flex-basis: calc(33.3333% - 30px);
max-width: calc(33.3333% - 30px);
}
}
#media (min-width: 1200px) {
.card-deck .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
}
}
By default, the flexbox used on card-deck card is flex:1 0 0% which means cards won't "grow" to width. You can override this by using flex-fill on the cards. Also use .card-deck .card specificity in the CSS selectors.
<div class="container">
<div class="card-deck">
<div class="card mb-4 flex-fill">
<img class="card-img-top img-fluid" src="//placehold.it/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>
... (more cards)
</div>
</div>
https://codeply.com/p/uqFnzcSLxU
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 am working with boostrap cards, and the following is what I have them currently looking like:
Now what I'd like to do is add vertical space between the cards so that Card 1 and Card 3 aren't stuck together as well as Card 2 and Card 4.
The following is my code and setup for the cards I currently have:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Add Class mb-3 for <div class="col-sm-6 mb-3">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
if you want more space, bootstrap class available like mb-4 mb-5
more info here
Add margin-bottom: 20px inside a card class in css file. check the below simple css.
In style.css file
.card {
margin-bottom: 20px !important;
}
I would add something like this (SCSS):
div[class^="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-top: 0;
}
}
* + * {
:last-child {
margin-bottom: 0;
}
}
... to handle vertical spaces in general.
I'm learning the Bootstrap framework and am attempting to make a two column card system to allow a "feed" of cards to be captured. Depending on the card type it will sit on the left or the right column. I'm using Bootstrap with what I believe to be a 12 column container. Inside the container there is a 6 column div and another 6 column div but for whatever reason they do not separate and all the cards end up being one long list of cards.
Example here:
http://codepen.io/jasonrpan/pen/KaLRdj
<div class="container">
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Left 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Left 2</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Right 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Right 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
</div>
Curious on why this might be?
Based on https://v4-alpha.getbootstrap.com/layout/grid/ you have to add a div with the class row around the columns.
Example here: http://codepen.io/Spreadyy/pen/aprrBG.
<div class="row">
Columns always must be within row...
Rows are horizontal groups of columns that ensure your columns are
lined up properly. We use the negative margin method on .row to ensure
all your content is aligned properly down the left side. Content
should be placed within columns, and only columns may be immediate
children of rows.
http://www.codeply.com/go/4GRZdVJ4KM