How to create card in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Card in Bootstrap: Simple Guide

To create a card in Bootstrap, use the card class on a container element and add child elements like card-body for content. Cards can include headers, images, and footers by using specific classes such as card-header, card-img-top, and card-footer.

📐

Syntax

A Bootstrap card is created by adding the card class to a container like a div. Inside, you can add:

card-header: for the card's header section
card-body: main content area
card-title and card-text: for titles and text inside the body
card-img-top: for an image at the top
card-footer: for footer content

html

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

Output

A rectangular card with an image on top, a title, some text below, and a footer at the bottom.

💻

Example

This example shows a simple Bootstrap card with an image, title, text, and a button inside the card body.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card 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-4">
    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Sample Image">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a simple card example using Bootstrap 5.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A card displayed with a placeholder image on top, a bold title below it, descriptive text, and a blue button labeled 'Go somewhere'.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap cards include:

Forgetting to include Bootstrap CSS, so styles don't apply.
Not using the card-body class for content, which breaks spacing and styling.
Placing images without the card-img-top class, causing layout issues.
Using inline styles for width instead of Bootstrap grid or utility classes, which reduces responsiveness.

html

<!-- Wrong: Missing card-body class -->
<div class="card" style="width: 18rem;">
  <h5>Title without card-body</h5>
  <p>Text without card-body</p>
</div>

<!-- Right: Using card-body -->
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Proper Title</h5>
    <p class="card-text">Proper text inside card-body.</p>
  </div>
</div>

Output

The first card looks unstyled and cramped; the second card has proper spacing and styling inside the card body.

📊

Quick Reference

Class	Purpose
card	Main container for the card
card-body	Container for card content like text and buttons
card-title	Title text inside card-body
card-text	Paragraph text inside card-body
card-img-top	Image placed at the top of the card
card-header	Header section above card-body
card-footer	Footer section below card-body

✅

Key Takeaways

Use the card class as the main container for Bootstrap cards.

Wrap content inside card-body for proper spacing and styling.

Add images with card-img-top to keep consistent layout.

Include Bootstrap CSS to ensure card styles work correctly.

Avoid inline styles for width; use Bootstrap utilities or grid for responsiveness.