Bootstrap Queries

Sass mixins based on bootstraps V5 media query breakpoints

Install

npm i boostrap-queries

Mixins

Create a media query finishing at <576px

@include screen-x-small() {
  ...
}

Create a media query finishing at ≥576px

@include screen-x-small() {
  ...
}

Create a media query starting at ≥768px

@include screen-medium() {
  ...
}

Create a media query starting at ≥992px

@include screen-large() {
  ...
}

Create a media query starting at ≥1200px

@include screen-extra-large() {
  ...
}

Create a media query starting at ≥1400px

@include screen-extra-extra-large() {
  ...
}

Functions

Get x-small dimension

$bootstrap-x-small: get-x-small();

Get small dimension

$bootstrap-small: get-small();

Get medium dimension

$bootstrap-medium: get-medium();

Get large dimension

$bootstrap-large: get-large();

Get extra-large dimension

$bootstrap-extra-large: get-extra-large();

Get extra-extra-large dimension

$bootstrap-extra-extra-large: get-extra-extra-large()

Utils

Hide elements at any bootstrap v5 screen width

@include hide-at-screen(get-small(), flex);