Container queries for Bootstrap

Install

``shell
npm i bootstrap-container-queries
`

$3

Add in the of your html file:

`html

`

$3

Add in your scss file:

`scss
@use "bootstrap-container-queries/scss/bootstrap-container-queries";
`

Or if you don't use SASS modules:

`scss
@import "bootstrap-container-queries/scss/bootstrap-container-queries";
`

Usage

Add the class .bcq to your parent container.

$3

Inside it you can use the class .bcq-{size} or .bcq-{breakpoint}-{size} like you will use a .col-*in Bootstrap.

$3

You can hide or display items (with any other display values) with .bcq-d-{value} or .bcq-d-{breakpoint}-{value} like .d-*.

$3

You can align text at start, center or end with .bcq-text-{value} or .bcq-text-{breakpoint}-{value} like .text-*.

$3

You can make the element float at start, end or none with .bcq-float-{value} or .bcq-float-{breakpoint}-{value} like .float-*.

$3

You can add the bootstrap margin or padding with .bcq-m{sides}-{breakpoint}-{value} or .bcq-p{sides}-{breakpoint}-{value}.

$3

You can add the flex direction column, column-reverse, row or row-reverse with .bcq-flex-{value} or .bcq-flex-{breakpoint}-{value}.

Custom breakpoints

You can add custom breakpoints for container queries:

`scss
$container-queries-breakpoints: (
sm: 30em,
md: 48em,
lg: 62em,
xl: 75em,
xxl: 90em,
);
`

Warning

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.

Contributors