tests/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>bsBreakpoints</title>
  </head>
  <body>
    <div class="container">
      <h1>bsBreakpoints</h1>
      <div>
        <p>
          Current breakpoint : <span id="cBreakPoint" class="badge rounded-pill text-bg-primary"></span>
        </p>
      </div>
    </div>
    <script src="../dist/bs-breakpoints.umd.cjs"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const cBreakPoint = document.getElementById('cBreakPoint');

        console.log(cBreakPoint);
        window.addEventListener('init.bs.breakpoint', function (e) {
          cBreakPoint.textContent = e.detail.breakpoint;
          console.warn(e.detail, e.detail.breakpoint);
        });

        window.addEventListener('new.bs.breakpoint', function (e) {
          cBreakPoint.textContent = e.detail.breakpoint;
          console.warn(e.detail, e.detail.breakpoint);
        });

        const detector = new bsBreakpoints.BreakpointDetector();
      })
    </script>
  </body>
</html>