title: How to align card images in bootstrap 4.4 so that all the cards have equal width and height.?
body: <p>So basically while making a simple website with Django and bootstrap 4.4 I came up with this issue. I was using 'cards' to add images of books in a grid format like in a bookstore web application. But the cards are not having equal dimensions. 
  How to align card images in bootstrap 4.4 so that all the cards have equal width and height while keeping it responsive to the window size change.??</p>
  
  <p>My problem in the image below. As you can see there the cards are not of same size when i add different images it changes its size as well.
  <a href="https://i.stack.imgur.com/dcTtz.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
              {% for book in object_list %}
              &lt;div class="col s3"&gt;
                  &lt;div class="card"&gt;
                      &lt;img class="img-fluid" src="{{book.book_image}}" alt=""&gt;
                      &lt;div class="card-body"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;p class="text-white"&gt;{{book.name}}&lt;/p&gt;
              &lt;/div&gt;
              {% endfor %}
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and .css</p>
  
  <pre><code>body{
  background: white url('images/webbg.jpg') no-repeat center center;
  background-size: cover;
  }
  
  </code></pre>
  
  <p>Example image of what I actually want to have <a href="https://i.stack.imgur.com/wkvK0.jpg" rel="nofollow noreferrer">enter image description here</a>
  I want exactly like what there is in the above picture with images loading from my database in a loop.(so not hardcoded image links embedded in html code)</p>