0

I am trying to make my bootstrap 4 cards images the same size. The images themselves are not the same size.

<div class="container">
    <div class="row">

    </div>

    <!-- card 2-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/boot.png" alt="bootstrap" class="card-img-top " 
            style="width: 100%; height: 100%;">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p>hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>

    <!-- card 3-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/css.png" alt="HTML" class="card-img-top ">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p> hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>
</div>

The code is the same for the images, and it still does not work. The text for the cards are the same, but the images are different sizes, and as a result, the cards are not coming out to be the same size. What could I do differently to try and fix this?

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Christian Begg
  • 77
  • 1
  • 2
  • 9

1 Answers1

2

The card-img-top class already makes the images expand to use the full size in the card; if the cards all have the same width you shouldn't have any issues; that is if you use the same markup structure defined in Bootstrap docs.

Here I have used images of multiple sizes and you can see all cards images display the same; maybe this can help you a bit

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" 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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>


  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/100" 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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/250" 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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Here is also the same example using the code you provided, I just made sure that your columns are wrapped inside a .row div; remember that's required in Bootstrap. You can also remove the style attribute, you shouldn't use that to alter the styles already applied by the classes.

I also don't know what the card-block is supposed to be; in any case Bootstrap has the .card-body class that's supposed to hold the content of the card

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/100" alt="bootstrap" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>

  <!-- card 3-->
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/150" alt="HTML" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>
</div>

</div>
IvanS95
  • 5,364
  • 4
  • 24
  • 62
  • The images are not even working when I change them. Is there anything else I could do? – Christian Begg Mar 25 '19 at 18:08
  • 3
    The width is fine, the height is the problem – Christian Begg Mar 25 '19 at 18:13
  • Ohh.. Hmm I think that actually normal behavior; for equal-height cards Bootstrap has another component called [Card Deck](https://getbootstrap.com/docs/4.3/components/card/#card-decks) or [Card Group](https://getbootstrap.com/docs/4.3/components/card/#card-groups).. But those are not responsive (as in usable with `col-*` classes) – IvanS95 Mar 25 '19 at 18:18
  • However I'm pretty sure I remember a question that had a similar requirement; I'll look for it and maybe it will help you out – IvanS95 Mar 25 '19 at 18:18
  • Okay so this is the answer I was referring to: https://stackoverflow.com/a/44456279/8437694 notice the use of `h-100` class on the cards so they expand to be the same height; although the result might not be exactly what you need. Can you try it out and provide feedback? – IvanS95 Mar 25 '19 at 18:24
  • 1
    It didn't keep the images the same, but it made the cards the same size which look really good. Thanks – Christian Begg Mar 25 '19 at 21:22