Create a card with an image, a title, a text and a button

Description: Create a card 18rem wide with an image on top, a title, a text and a button.

Hint:

• Use card, card-img-top, card-body, card-title and card-text.

---

Solution

<div class="card" style="width: 18rem;">
  <img src="images/photo.jpg" class="card-img-top" alt="A sample image">
  <div class="card-body">
    <h5 class="card-title">Learn Bootstrap</h5>
    <p class="card-text">A short text about the course, with some words.</p>
    <a href="#" class="btn btn-primary">Start now</a>
  </div>
</div>

How it works

• The image uses card-img-top, so it fits the top of the card with rounded corners.
• The text and the button are inside card-body, which gives the padding.

Read Cards.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.