Good evening all!
I've written the following code which was working perfectly. But using the images I use which are different resolutions this makes the card images different sizes. Is there a way to make all the images scale to the same size?
Example here:
https://imgur.com/a/PWVQH
My code is using Bootstrap 4 CDN.
<section>
<div class="container">
<div class="card-group">
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" 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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/truck image.png" 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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/sprintervan.png" 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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
Any help would be amazing!
Thank you.
From your example, it looks like you're having a problem with height.
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
https://getbootstrap.com/docs/4.0/content/images/
A suggested workaround would be to add .h-100 (height 100%) to the parent node of each fluid img card
<div class="h-100">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" alt="Card image cap">
</div>
https://github.com/twbs/bootstrap/issues/21885
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.
Currently i am working on a eCommerce site (i am newbie).
i am using bootstrap for basic styling.
the structure is given below.
The div Of class "nl-row" is dynamic.depending upon the no of items in the db it will increase.
so i am trying to dynamically center the divs in a ".container" div.
the "nl-row" is given the width of 300px, so if the ".container" had the width of 1000px, there should be 3 "nl-row" in a row and if the ".container" had the width of 700px there should be 2 "nl-row" in a row and should center themselves in the row.
-Please help Me with this issue.
<div id="nl-container-1" class="nl-container">
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
For the parent use (display:flex;justify-content:center)for the children use :width 300px)
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?
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
Notice the width of the two upper cards are not as wide as the lower one
View source
source code:
<div class="col-md-12">
<div class="card-deck m-b-1">
<div class="card">
<div class="card-block">
<img alt="Card image cap" class="card-img-top" src=
"http://lorempixel.com/318/180/sports/5">
<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><a class="card-link" href="#">Läs mer</a>
</div>
</div>
<div class="card">
<div class="card-block">
<img alt="Card image cap" class="card-img-top" src=
"http://lorempixel.com/318/180/sports/7">
<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><a class="card-link" href="#">Läs
mer</a>
</div>
</div>
</div>
</div>
I've tried changing up the rows and column structure and not using columns at all but no success!
Actually, that's not messed up, that's the intended view. There's 2 cards within the card-deck so there's 2 columns. To have the upper 2 cards the same width as the lower one, take them out of the card-deck div.