bhylu.com

Advertisements

Bootstrap 5 Buttons

Style a real button and implement its small action without relying on an inline event attribute.

How it works

The element determines interaction semantics; the btn class supplies presentation. Use a button for a command and an anchor with a meaningful href for navigation. Specify type=button when the control is not meant to submit a form. A label should explain the action without depending on an icon or nearby visual position. This local example adds one sample kit item to a visible count and does not save anything to a server.

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 Use a Button for a Command and a Link for a Destination</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<button id="add-kit" type="button" class="btn btn-primary">Add sample kit</button><p id="kit-count" class="mt-3 mb-0" role="status">Kits: 0</p>
</main>
  <script>
let kits = 0;
document.querySelector("#add-kit").addEventListener("click", () => {
  kits += 1;
  document.querySelector("#kit-count").textContent = `Kits: ${kits}`;
});
  </script>
</body>
</html>

Expected result

Each click increases the visible kit count by one; the status text changes only after that action.

The inline classic script uses addEventListener rather than an onclick attribute, matching the playground’s supported script model. The counter belongs to this page instance and resets when the document is recreated. A production reservation action would need validation, persistence and failure feedback rather than treating this demonstration as a saved booking.

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