bhylu.com

Advertisements

Bootstrap 5 Exercises

Create a one-column phone layout and a three-column wide layout without changing the session reading order.

Your brief

Your task is to present three practice sessions with consistent gaps, usable text and no document overflow. Start with a single column, add a three-column layout only when the content fits, and let each panel grow with its text. Predict which classes control the width and which control internal padding before opening the solution. Do not solve alignment by giving every panel a fixed height. Test a longer session title and browser zoom before considering the layout finished.

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.

Worked solution

Show the worked solution
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 Practice: Repair a Crowded Session Grid</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 row-cols-1 row-cols-lg-3 g-3"><article class="col sample-cell"><div class="border rounded p-3 h-100"><h2 class="h5">Paper</h2><p class="mb-0">Small tear practice.</p></div></article><article class="col sample-cell"><div class="border rounded p-3 h-100"><h2 class="h5">Fabric</h2><p class="mb-0">A careful hand stitch.</p></div></article><article class="col sample-cell"><div class="border rounded p-3 h-100"><h2 class="h5">Tool care</h2><p class="mb-0">Cleaning and safe storage.</p></div></article></div>
</main>
</body>
</html>

Expected result

The panels stack first and share three columns from lg, preserving paper, fabric and tool-care order.

The row owns the repeated layout policy and g-3 supplies both gutter directions. Inner padding separates content from the border, while h-100 aligns items within each row. The solution uses no script, external media or fake action. Compare the DOM order with keyboard order before experimenting with visual ordering utilities.

Extend and test

Make the middle title three times longer. Test 375px, 991px and 992px, then explain why the layout still avoids horizontal document overflow.

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

Advertisements