Bootstrap 5 Cards

How it works

A card is a content container rather than a complete interaction model. It can hold a heading, summary, metadata and an optional action. Use a real heading level that fits the surrounding page, then style it with card-title and a size class as needed. When a card has several controls, avoid a stretched link that covers unrelated buttons or creates confusing overlapping hit areas. Equal-height presentation should not depend on fixed heights that clip longer content.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Give a Card One Clear Content Job</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<div class="row g-3"><article class="col-md-6"><div class="card h-100"><div class="card-body"><h2 class="card-title h5">Paper repair</h2><p class="card-text">Practise a small tear repair using a sample sheet.</p><p class="mb-0 text-body-secondary">10:00 · 45 minutes</p></div></div></article><article class="col-md-6"><div class="card h-100"><div class="card-body"><h2 class="card-title h5">Fabric repair</h2><p class="card-text">Learn a neat hand stitch with volunteer guidance.</p><p class="mb-0 text-body-secondary">11:30 · 60 minutes</p></div></div></article></div>
</main>
</body>
</html>

Expected result

Two session summaries stack when narrow and share a row when space permits, without invented action links.

The outer columns control layout while the cards control their own borders and internal spacing. h-100 aligns panels within a row without a fixed pixel height. A summary should expose enough information to choose a next action; do not rely on hover alone for the time or access requirements.