Bootstrap 4 изображения карт, охватывающих текст карты

Question

Я пытаюсь создать 3 простые карточки с изображениями в Bootstrap 4, но независимо от того, как я пытаюсь это сделать, изображение внутри карточки занимает всю карточку, закрывая подпись под ней.

Карты должны выглядеть точно так же, как пример, так как я использую один и тот же код, просто помещая его в ряд.Текст карты есть, но он находится прямо под изображением.Как я могу сделать карту длиннее, чтобы изображения оставались сверху и отображали текст ниже?

Вот пример карты Bootstrap:

А вот как выглядит моя:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
</div>

Answer 1

Хорошо выглядит для меня.

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

<div class="row">
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
</div>