npm i bootstrap-container-queriesAdd in the <head> of your html file:
<link href="PATH_TO/bootstrap-container-queries.css" rel="stylesheet" />Add in your scss file:
@use "bootstrap-container-queries/scss/bootstrap-container-queries";Or if you don't use SASS modules:
@import "bootstrap-container-queries/scss/bootstrap-container-queries";Add the class .bcq to your parent container.
Inside it you can use the class .bcq-{size} or .bcq-{breakpoint}-{size} like you will use a .col-*in Bootstrap.
You can hide or display items (with any other display values) with .bcq-d-{value} or .bcq-d-{breakpoint}-{value} like .d-*.
You can align text at start, center or end with .bcq-text-{value} or .bcq-text-{breakpoint}-{value} like .text-*.
You can make the element float at start, end or none with .bcq-float-{value} or .bcq-float-{breakpoint}-{value} like .float-*.
You can add the bootstrap margin or padding with .bcq-m{sides}-{breakpoint}-{value} or .bcq-p{sides}-{breakpoint}-{value}.
You can add the flex direction column, column-reverse, row or row-reverse with .bcq-flex-{value} or .bcq-flex-{breakpoint}-{value}.
You can add custom breakpoints for container queries:
$container-queries-breakpoints: (
sm: 30em,
md: 48em,
lg: 62em,
xl: 75em,
xxl: 90em,
);The .bcq class will create a new Stacking Context that can result of z-index or transform: translate on the Z axis to not work.