Bootstrap v4.5 Make Cards The Same Size

Question

First, I'm sorry if there is already an answer to this somewhere. If so, just point me in that direction. I've been looking for a while and can't seem to find an answer that works the way I need.

I am trying to get all of the bootstrap cards on my heroku page to be the same size. I had it set with the container surrounding the responsive divs as display flex and justify-content-center and align-items-center. I have also tried align-items-stretch but it still doesn't result in the cards all being the same height. I've also tried using the bootstrap height utility (h-100) on the responsive divs within the row. Also used css min-height but ran into problems as content would overflow the divs when resizing window.

This is what I currently have that ends up with different sized cards based on the content:

<div class='home-container m-5'>
    <div class="row d-flex mb-5 justify-content-center align-items-center">
        <div class="col-sm-6 col-lg-4">
            <a href='./Multi-welders'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Multiprocess Welders</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4">
            <a href='./helmets'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Welding Helmets</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4 h-100">
            <a href='./gloves'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Welding Gloves</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card m-3 bg-light">
                <img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                    </div>                  
                        <h2 class="card-title coming-soon">Best MIG Welders</h2>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class='card m-3 bg-light'>
                <img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                       </div>
                    <h2 class="card-title coming-soon">Best TIG Welders</h2>
                </div>
            </div>
        </div>
        <div class='col-sm-6 col-lg-4'>
            <div class='card m-3 bg-light'>
                <img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                    </div>
                    <h2 class="card-title coming-soon">Best Professional Welders</h2>
                </div>
            </div>
        </div>
    </div>
</div>

score -1 · Answer 1 · answered Oct 16 '20 at 12:27

-1

You can add the following css class:

.card {
  height: 200px
}

This will give all your cards the same height. You can just change the height to whatever you like.

answered Oct 16 '20 at 12:27

Corné

1,304
3
13
32

Yeah, I've been messing around with that. The only thing about going this route is that the responsive divs wrap onto different lines depending on margins between them (which means they don't wrap at the normal break points) and the inner content (like the h2's) is responsive with the width of the card, which would mean a bunch of different media queries for all the changes. Plus, when looking at it, the content was sticking to the top and not centered in the card. I was really hoping Bootstrap had something for this. Might have to go read up some more on card-decks. – rrockwel Oct 16 '20 at 12:46
I ended up using the card-deck in Bootstrap, after all. I used media queries and card width to control how many cards appeared on each line, making it appear similar to how it started, moving smoothly from a single card column on small screens to 2 rows of 3 cards on largest screens: {@media only screen and (max-width: 600px) { .home-container .card{ width:75vw; } } @media only screen and (min-width: 600px) { .home-container .card{ width:80vw; } } – rrockwel Oct 17 '20 at 17:52
Sorry I stink at formatting code on here. Not used to using stackoverflow yet. – rrockwel Oct 17 '20 at 18:00

Bootstrap v4.5 Make Cards The Same Size

1 Answers1