https://github.com/joegasewicz/boostrap-queries
Media queries for Bootstrap v5
https://github.com/joegasewicz/boostrap-queries
Last synced: 6 months ago
JSON representation
Media queries for Bootstrap v5
- Host: GitHub
- URL: https://github.com/joegasewicz/boostrap-queries
- Owner: joegasewicz
- License: mit
- Created: 2023-09-09T18:49:09.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-14T17:16:20.000Z (about 2 years ago)
- Last Synced: 2025-02-10T14:53:20.416Z (8 months ago)
- Language: SCSS
- Size: 64.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bootstrap Queries
Sass mixins based on bootstraps V5 media query breakpoints
### Install
```
npm i boostrap-queries
```
### Mixins
Create a media query finishing at <576px
```scss
@include screen-x-small() {
...
}
```
Create a media query finishing at ≥576px
```scss
@include screen-x-small() {
...
}
```
Create a media query starting at ≥768px
```scss
@include screen-medium() {
...
}
```
Create a media query starting at ≥992px
```scss
@include screen-large() {
...
}
```
Create a media query starting at ≥1200px
```scss
@include screen-extra-large() {
...
}
```
Create a media query starting at ≥1400px
```scss
@include screen-extra-extra-large() {
...
}
```
### Functions
Get x-small dimension
```scss
$bootstrap-x-small: get-x-small();
```
Get small dimension
```scss
$bootstrap-small: get-small();
```
Get medium dimension
```scss
$bootstrap-medium: get-medium();
```
Get large dimension
```scss
$bootstrap-large: get-large();
```
Get extra-large dimension
```scss
$bootstrap-extra-large: get-extra-large();
```
Get extra-extra-large dimension
```scss
$bootstrap-extra-extra-large: get-extra-extra-large();
```
### Utils
Hide elements at any bootstrap v5 screen width
```scss
@include hide-at-screen(get-small(), flex);
```