Adding Images to Cards

  • .card-img-top → Places an image on top
  • .card-img-bottom → Places an image at the bottom

Example: Card with Image

HTML
<div class="card" style="width: 18rem;">
  <img src="./Frame (1).jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This is a card with an image at the top.</p>
  </div>
</div>

Output:

PreviousNext