what are the ways that i can follow to mange the height in card created using bootstrap

Hello i have a card containers that have 3 cards on ii don't have any problem in managing its width but i have problems in height as below , the third one is now have height greater than the others ,consider this datacomes from daabase how can i mange the height, i want them all to be on the same heigh, included a screenshot
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
<div class="col-md-12">
<div class="card text-bg-primary">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
<div class="col-md-12">
<div class="card text-bg-primary">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning">
<div class="card-body">
<h5 class="card-title">
welcome
</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cupiditate doloremque distinctio saepe fugit beatae vitae ratione hic nobis suscipit.
</div>
</div>
</div>
</div>
No description
14 Replies
snxxwyy
snxxwyy•7d ago
to make them the same height you'd need to add align-items: stretch.
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•7d ago
You can remove the col columns
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•7d ago
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•7d ago
stretch is the default thats not the problem
snxxwyy
snxxwyy•7d ago
alright, i guess it's a tailwind thing, i thought they set it to start or something
steven preadly
steven preadly•7d ago
i am using bootstrap
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•7d ago
Do what i did, then you can create some gap between the items using the gap property, not sure what the bootstrap class for gap is, i personally never use bootstrap
steven preadly
steven preadly•7d ago
it is gap-1 ,2,3 etc
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•7d ago
Ah okay, yeah go with that then 🙂
steven preadly
steven preadly•4d ago
In that case there is no need to us the columns I can instead use flexox in that case i am still have the same problem
Mannix
Mannix•4d ago
instead of wrapping the cards with a col class add that class to the card
steven preadly
steven preadly•4d ago
if i added the col class with the card class i cant use gutter to make space between the first card and the secoun
Mannix
Mannix•4d ago
how about h-100 to the card?
steven preadly
steven preadly•4d ago
i will try