Bootstrap 5 Introduction

How it works

Bootstrap provides CSS and optional JavaScript for common interface patterns. It does not decide your content, information order or business rules. This course builds an original neighbourhood repair-day interface: a session list, labelled registration form and practical status messages. Basic HTML helps; learn headings, links, forms and the box model first if those are new. Start with a small styled section, then inspect which classes affect spacing and which elements carry meaning. The main Bhylu interface keeps its existing theme rather than importing Bootstrap globally.

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 Introduction: Build a Repair-day Page</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<section class="border rounded-3 p-4"><h2 class="h4">Bring one item. Learn one repair.</h2><p class="mb-0">Saturday sessions cover small fabric and paper repairs.</p></section>
</main>
</body>
</html>

Expected result

A bordered introduction has a smaller session heading, comfortable padding and no unnecessary trailing paragraph margin.

The section and heading express structure; border, rounded-3 and p-4 control presentation. Bootstrap’s styles are local to this separate example page. Removing a styling class should not remove the meaning of the content. The CSS playground can show this example without loading a framework script or contacting an external CDN.