0
0
Bootsrapmarkup~5 mins

Why cards organize content in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Cards help group related information in a neat box. They make content easy to read and understand.

Showing a product with image, title, and description together
Displaying user profiles with photo and details
Organizing blog posts previews on a page
Presenting features or services in separate sections
Grouping related links or actions visually
Syntax
Bootsrap
<div class="card">
  <img src="image.jpg" 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>
Use card class to create the container box.
Put content inside card-body for padding and spacing.
Examples
A card with only text inside the body.
Bootsrap
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Simple Card</h5>
    <p class="card-text">Just text content here.</p>
  </div>
</div>
A card that includes an image on top and text below.
Bootsrap
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card shows an image on top.</p>
  </div>
</div>
Using text-center class to center text inside the card.
Bootsrap
<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">Centered Text</h5>
    <p class="card-text">Text is centered inside the card.</p>
  </div>
</div>
Sample Program

This example shows a Bootstrap card with an image on top, a title, some text, and a button. The card is centered on the page and is responsive on different screen sizes.

Bootsrap
<!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>
  <main class="container my-5">
    <section class="row justify-content-center">
      <article class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/300x180" class="card-img-top" alt="Sample Image">
          <div class="card-body">
            <h5 class="card-title">Sample Card</h5>
            <p class="card-text">This card groups an image, title, and text in one neat box.</p>
            <a href="#" class="btn btn-primary" aria-label="Learn more about Sample Card">Learn More</a>
          </div>
        </div>
      </article>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Cards help keep content organized and visually separate from other parts of the page.

Use descriptive alt text for images inside cards for accessibility.

Cards are responsive by default in Bootstrap, so they look good on phones and computers.

Summary

Cards group related content in a clear, boxed layout.

They make pages easier to scan and understand.

Bootstrap cards come with built-in styles for images, text, and buttons.