BootstrapHow-ToBeginner · 3 min read

How to Use Card Body in Bootstrap: Simple Guide

In Bootstrap, use the card-body class inside a card container to add padded content like text, images, or buttons. Wrap your content inside a <div class="card-body"> to get consistent spacing and styling within the card.

📐

Syntax

The card-body is a <div> element with the class card-body. It must be placed inside a container with the class card. This structure ensures your content has proper padding and aligns with Bootstrap's card design.

<div class="card">: The main card container.
<div class="card-body">: The section inside the card for content.
Place text, images, buttons, or other elements inside card-body.

html

<div class="card">
  <div class="card-body">
    <!-- Your content here -->
  </div>
</div>

💻

Example

This example shows a Bootstrap card with a card body containing a title, some text, and a button. The card-body adds padding and styles the content inside the card.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Body 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;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is some example text inside the card body. It is nicely padded and styled.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</body>
</html>

Output

A small card with a white background and subtle shadow, containing a bold title, a paragraph of text, and a blue button labeled 'Go somewhere'. The content inside the card has comfortable padding.

⚠️

Common Pitfalls

Common mistakes when using card-body include:

Not placing card-body inside a card container, which breaks the layout.
Forgetting to add the card-body class, causing no padding or styling.
Adding multiple card-body divs without clear structure, which can confuse the layout.

Always ensure card-body is a direct child of card and contains your main content.

html

<!-- Wrong: card-body outside card -->
<div class="card-body">
  <p>This will not be styled correctly.</p>
</div>

<!-- Right: card-body inside card -->
<div class="card">
  <div class="card-body">
    <p>This is styled properly with padding.</p>
  </div>
</div>

📊

Quick Reference

Use this quick guide when working with Bootstrap card bodies:

Container: Always wrap card-body inside a card.
Content: Place text, images, buttons inside card-body.
Styling: card-body adds padding and aligns content.
Multiple sections: You can have multiple card-body sections for different content blocks.

✅

Key Takeaways

Always place card-body inside a card container for proper styling.

card-body adds padding and styles to the content inside Bootstrap cards.

Use card-body to wrap text, images, buttons, or other elements inside a card.

Avoid placing card-body outside the card container to prevent layout issues.

You can use multiple card-body sections inside one card for separate content areas.