bhylu.com

Advertisements

Bootstrap 5 Figures and Aspect Ratio

Use figure markup for an illustration and a ratio wrapper for a deliberately cropped preview.

How it works

A figure groups media with its caption when they form one self-contained item. A ratio helper creates an aspect-ratio box; it does not determine whether cropping is appropriate or provide accessible meaning. object-fit-cover can crop an image to that box while preserving its shape. Use it when the missing edges do not remove essential information. The local illustration makes the crop easy to inspect and avoids relying on an unavailable external video or image service.

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

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Keep a Caption Connected to Its Media</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<figure class="figure w-100"><div class="ratio ratio-16x9"><img class="object-fit-cover rounded" src="data:image/png;base64,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" alt="Repair kit prepared for the event"></div><figcaption class="figure-caption mt-2">The shared kit is checked before each repair session.</figcaption></figure>
</main>
</body>
</html>

Expected result

The image fills a 16:9 region and its caption remains part of the same figure.

The wrapper controls the presentation box and the child image fills it. A caption can add contextual information while alt supplies an image alternative; they need not be identical. Embedding a real third-party video would introduce network, privacy and player-accessibility questions that this controlled local example does not claim to test.

Check Bootstrap’s official 5.3 documentation for component contracts and version details.