bhylu.com

Advertisements

Bootstrap 5 Quiz

Explain whether a result comes from HTML, CSS, the Bootstrap bundle or the application’s own logic.

Your brief

Before opening the answer, classify four claims: a heading level creates document structure; a grid class changes presentation; a modal needs plugin behaviour; a booking confirmation needs an application/storage outcome. Then decide whether data-bs-theme saves a preference, reserve-like sizing utilities create content, or a coloured invalid border proves server validation. A useful knowledge check asks for the contract and failure boundary rather than a memorised class inventory. The small solution below demonstrates only a labelled native control.

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 Knowledge Check: Meaning, Assets and State</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<label class="form-label" for="quiz-note">Local practice note</label><input id="quiz-note" class="form-control" type="text"><p class="form-text mb-0">The label comes from HTML. The border and spacing come from CSS. No note is saved.</p>
</main>
</body>
</html>

Expected result

A labelled input renders and remains editable without a Bootstrap script or persistence endpoint.

The control’s semantic name comes from label/for, while form-control changes its appearance. A native input can accept typing without the framework’s JavaScript bundle. Saving its contents would be a separate operation with validation, privacy and failure responsibilities. A useful explanation distinguishes all three instead of treating a styled field as a complete application.

Extend and test

List one component that needs Bootstrap JavaScript and one that does not. For each, name a keyboard or state check you would run.

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

Advertisements