<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-detect-breakpoint</title>
<meta name="description" content="Get the current Bootstrap breakpoint in JavaScript" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
pre {
background-color: #eee;
padding: 0 1.5rem;
}
</style>
</head>
<body class="p-lg-5 p-md-4 p-sm-2 mt-2">
<div class="container-fluid">
<h1 class="mb-4">bootstrap-detect-breakpoint</h1>
<div class="card mb-4">
<div class="card-body">
Current Breakpoint: <span id="breakpoint-output"></span>
</div>
</div>
<pre><code>
const output = document.getElementById("breakpoint-output")
function updateView() {
const currentBreakpoint = bootstrapDetectBreakpoint()
output.innerHTML = "<code>" + JSON.stringify(currentBreakpoint) + "</code>"
}
updateView()
window.onresize = updateView
</code></pre>
<ul>
<li><a href="https://github.com/shaack/bootstrap-detect-breakpoint">Documentation and Repository on GitHub</a></li>
</ul>
</div>
<script src="src/bootstrap-detect-breakpoint.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
const output = document.getElementById("breakpoint-output")
function updateView() {
const currentBreakpoint = bootstrapDetectBreakpoint()
output.innerHTML = "<code>" + JSON.stringify(currentBreakpoint) + "</code>"
}
updateView()
window.onresize = updateView
</script>
</body>
</html>