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.
Related
I am using Tailwind with React and I have a grid that looks like this currently.
<div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 place-items-center gap-4">
{cards.map((card) => (
<div
className="h-[auto] w-[320px] px-2 pt-2 pb-4 rounded-md border-2 border-gray-200"
key={card.id}
>
<div className="relative rounded-xl overflow-hidden">
<img src={card.image} alt="fund1" />
<div className="absolute top-4 uppercase right-4 leading-tight font-bold w-[70px] h-[70px] flex items-center justify-center bg-white text-black rounded-full text-[11px] text-center">
Discover your match
</div>
</div>
<article className="px-2">
<h2 className="font-bold text-[25px] hover:text-[#6D9886] transition-colors cursor-pointer my-4">
{card.topic}
</h2>
<p className="font-light text-[14px]">{card.text}</p>
<button className="block mx-auto text-[#6D9886] mt-6">
Read more
</button>
</article>
</div>
))}
</div>
Now, The height of the cards is not balanced from top as I want it straight. Also from bottom of the cards, I want the other cards to adjust as soon as one's height ends.
Here is what I want to achieve:
I have tried setting differed columns and rows properties from grid but no luck.
If you are using Bootstrap you will get
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<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>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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 short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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>
</div>
</div>
</div>enter code here
</div>
or if you are using simple css just give a class and give that class to every part
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'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
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