<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Components</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- 1. Tooltips -->
  <div class="container my-3">
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip: Jan Kowalski">
      Hover me for tooltip
    </button>
  </div>

  <!-- 2. Toasts -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Toast Header</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, Jan Kowalski! This is a toast message.
      </div>
    </div>
  </div>

  <!-- 3. Popovers -->
  <div class="container my-3">
    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="Hello, Jan Kowalski! This is popover content.">
      Click me for popover
    </button>
  </div>

  <!-- 4. List group -->
  <div class="container my-3">
    <ul class="list-group">
      <li class="list-group-item">Jan Kowalski - First item</li>
      <li class="list-group-item">Jan Kowalski - Second item</li>
      <li class="list-group-item">Jan Kowalski - Third item</li>
    </ul>
  </div>

  <!-- 5. Dropdowns -->
  <div class="container my-3">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Jan Kowalski - Action</a></li>
        <li><a class="dropdown-item" href="#">Another Jan Kowalski action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>

  <!-- 6. Collapse -->
  <div class="container my-3">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
    </p>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Hello, Jan Kowalski! This is collapsible content.
      </div>
    </div>
  </div>

  <!-- 7. Close button -->
  <div class="container my-3">
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>

  <!-- 8. Cards -->
  <div class="container my-3">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Jan Kowalski - Card title</h5>
        <p class="card-text">Hello! This is an example card.</p>
      </div>
    </div>
  </div>

  <!-- 9. Button group -->
  <div class="container my-3">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-primary">Jan</button>
      <button type="button" class="btn btn-primary">Kowalski</button>
      <button type="button" class="btn btn-primary">Group</button>
    </div>
  </div>

  <!-- 10. Buttons -->
  <div class="container my-3">
    <button type="button" class="btn btn-primary">Primary button - Jan Kowalski</button>
  </div>

  <!-- 11. Badges -->
  <div class="container my-3">
    <h1>Example heading <span class="badge bg-secondary">New - Jan Kowalski</span></h1>
  </div>

  <!-- 12. Progress -->
  <div class="container my-3">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        50% - Jan Kowalski
      </div>
    </div>
  </div>

  <!-- 13. Placeholders -->
  <div class="container my-3">
    <div class="placeholder-glow">
      <span class="placeholder col-6"></span>
    </div>
    <div>Real content: Jan Kowalski</div>
  </div>

  <!-- 14. Pagination -->
  <div class="container my-3">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Jan</a></li>
        <li class="page-item"><a class="page-link" href="#">Kowalski</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>
  </div>

  <!-- 15. Offcanvas -->
  <div class="container my-3">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      Toggle offcanvas - Jan Kowalski
    </button>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas - Jan Kowalski</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <p>Hello, Jan Kowalski! This is offcanvas content.</p>
      </div>
    </div>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })

      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
      }) Uncaught ReferenceError ReferenceError: bootstrap is not defined

      var toastElList = [].slice.call(document.querySelectorAll('.toast'))
      var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(toastEl).show()
      })
    });
  </script>
</body>
</html>