Media запросы под Bootstrap

Для задания сетки средствами Bootstrap в файлах SASS (SCSS) необходимо указывать следующие запросы.

При desctop first:

@include media-breakpoint-down(xxl) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(sm) { ... }

нативно:

// 4K
@media (max-width: 8000px){}

// 2K
@media (max-width: 2560px){}

// FHD
@media (max-width: 1920px){}

// XXL
@media (max-width: 1399.98px){}

// XXL
@media (max-width: 1199.98px){}

// XXL
@media (max-width: 991.98px){}

// XXL
@media (max-width: 767.98px){}

// XXL
@media (max-width: 575.98px){}

// MOBILE
@media (max-width: 480px){}

// OLD MOBILE
@media (max-width: 400px){}

При mobile first:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... 

нативно:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Для задания определенной точки:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Для задания промежутка:

@include media-breakpoint-between(md, xl) { ... }
Подобные материалы

CRG Home 2026

Не является публичной офертой.