Брейкпоинты Bootstrap 5

Когда делается адаптивная верстка на bootstrap 5 удобно иметь перед глазами брейкпоинты на которых срабатывает фреймворк, меняя при этом стилли классов, взял это из bootstrap 5 для себя, что бы было под рукой, но думаю кому то может пригодится

<pre>

@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}</pre>

Как использовать эти медиазапросы в своей верстке?

Берем эти брейкпоинты и добавляем их себе в конце css файла стилей (к примеру style.css), он должен подключаться после все css файлов что бы работал верно

<pre>

@media (min-width: 576px) {
  
}
@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
}
@media (min-width: 1200px) {
  
}
@media (min-width: 1400px) {
  
}</pre>

Примеры использования с объяснением

В этом примере цвет фона страницы будет изменяться в зависимости от ширины экрана. Например, если ширина экрана равна 600px, то будет применяться стиль из первого медиазапроса и цвет фона будет синим. Если ширина экрана равна 800px, то будет применяться стиль из второго медиазапроса и цвет фона будет зеленым, и так далее.

Это очень удобно для создания адаптивного дизайна сайта услуг , который выглядит хорошо на разных устройствах с разной шириной экрана.

<pre>

<code>@media (min-width: 576px) {
  /* Стили для экранов шириной 576px и больше. */
  body {
    background-color: blue;
  }
}

@media (min-width: 768px) {
  /* Стили для экранов шириной 768px и больше. */
  body {
    background-color: green;
  }
}

@media (min-width: 992px) {
  /* Стили для экранов шириной 992px и больше. */
  body {
    background-color: yellow;
  }
}

@media (min-width: 1200px) {
  /* Стили для экранов шириной 1200px и больше. */
  body {
    background-color: orange;
  }
}

@media (min-width: 1400px) {
  /* Стили для экранов шириной 1400px и больше. */
  body {
    background-color: red;
  }
}</code></pre>