bootstrap-container-queries
Version:
Container queries for bootstrap
100 lines (99 loc) • 3.51 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Container Queries</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link href="./style.css" rel="stylesheet" />
<style>
.resizable {
width: 30em;
resize: horizontal;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<h1 class="display-1 text-center">Bootstrap Container Queries</h1>
<div class="text-center">
<div class="btn-group mb-3" role="group">
<button type="button" class="btn btn-outline-primary" data-size="28">
xs
</button>
<button type="button" class="btn btn-outline-primary" data-size="30">
sm
</button>
<button type="button" class="btn btn-outline-primary" data-size="48">
md
</button>
<button type="button" class="btn btn-outline-primary" data-size="62">
lg
</button>
<button type="button" class="btn btn-outline-primary" data-size="75">
xl
</button>
<button type="button" class="btn btn-outline-primary" data-size="90">
xxl
</button>
</div>
</div>
<div class="resizable border border-primary">
<div class="bcq row">
<div class="bcq-sm-6 bcq-md-4 bcq-lg-3">bcq-sm-6 bcq-md-4 bcq-lg-3</div>
<div class="bcq-sm-6 bcq-md-4 bcq-lg-3">bcq-sm-6 bcq-md-4 bcq-lg-3</div>
<div class="bcq-sm-6 bcq-md-4 bcq-lg-3">bcq-sm-6 bcq-md-4 bcq-lg-3</div>
</div>
<div class="bcq">
<div class="bcq-d-sm-none">hide on sm and wider screens</div>
<div class="bcq-d-none bcq-d-sm-block">
hide on screens smaller than sm
</div>
<div class="bcq-d-md-none">hide on lg and wider screens</div>
<div class="bcq-d-none bcq-d-md-block">
hide on screens smaller than md
</div>
<div class="bcq-d-lg-none">hide on lg and wider screens</div>
<div class="bcq-d-none bcq-d-lg-block">
hide on screens smaller than lg
</div>
<div class="bcq-text-start bcq-text-sm-end">
text start < sm < text end
</div>
<div class="bcq-text-start bcq-text-md-end">
text start < md < text end
</div>
<div class="bcq-text-start bcq-text-lg-end">
text start < lg < text end
</div>
<div class="bcq-float-start bcq-float-sm-end">
float start < sm < float end
</div>
<div class="bcq-float-start bcq-float-md-end">
float start < md < float end
</div>
<div class="bcq-float-start bcq-float-lg-end">
float start < lg < float end
</div>
<div class="bcq-flex-column bcq-flex-lg-column-reverse">
flex direction column < lg < flex direction column-reverse
</div>
</div>
</div>
</body>
<script>
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", () => {
document.querySelector(".resizable").style.width =
`${button.dataset.size}em`;
});
});
</script>
</html>