How to create card with image in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Card with Image in Bootstrap Easily

Use Bootstrap's card component with an <img> tag having the class card-img-top to add an image on top of the card. Wrap the image and content inside a div with class card to create a styled card with an image.

📐

Syntax

The basic structure for a Bootstrap card with an image includes a div with class card. Inside it, place an <img> tag with class card-img-top for the image on top. Below the image, add a div with class card-body to hold text or other content.

card: container for the card
card-img-top: styles the image to appear at the top and fit the card width
card-body: container for card content like title and text

html

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>

💻

Example

This example shows a card with an image on top, a title, and some text below. The card is 18rem wide and the image fits the card width automatically.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card with Image Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180.png?text=Card+Image" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a simple card with an image on top using Bootstrap.</p>
      </div>
    </div>
  </div>
</body>
</html>

Output

A card 18rem wide with a placeholder image on top, a bold title below it, and a short paragraph of text under the title, all styled with Bootstrap's default card styles.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap cards with images include:

Not adding the card-img-top class to the <img> tag, causing the image to not fit the card width properly.
Forgetting to wrap content inside card-body, which can break spacing and styling.
Using images without alt attributes, which hurts accessibility.
Setting fixed widths without responsiveness, making cards look bad on small screens.

html

<!-- Wrong: Missing card-img-top class -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" alt="Image">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
  </div>
</div>

<!-- Correct: Added card-img-top class -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
  </div>
</div>

📊

Quick Reference

Remember these key classes when creating a Bootstrap card with an image:

Class	Purpose
card	Main container for the card
card-img-top	Styles image to appear at the top and fit card width
card-body	Container for card content like text and titles
card-title	Styles the card title text
card-text	Styles the card paragraph text

✅

Key Takeaways

Use card-img-top class on the <img> tag to properly style the image at the top of the card.

Wrap text content inside a div with class card-body for correct spacing and styling.

Always include an alt attribute on images for accessibility.

Set card width using inline styles or Bootstrap grid for responsive layouts.

Bootstrap cards automatically handle image scaling and layout when classes are used correctly.