Переопределение точек останова системы сетки Bootstrap 4.x и 5.x

Чтобы настроить точку останова xl Bootstrap, крайне важно понимать переменные, которые управляют точки останова и ширина контейнера.

sass
В вашей сборке Sass вам нужно будет изменить две переменные: $grid-breakpoints и $container-max-widths. Эти переменные определяют пороговые значения размера, при которых система сетки Bootstrap и элементы контейнера будут реструктурироваться.

В предоставленном коде Sass вы правильно настроили $grid-breakpoints, включив точку останова в 1280 пикселей. Однако, чтобы изменения вступили в силу, необходимо также изменить переменную $container-max-widths.

Рабочий пример
Чтобы переопределить точку останова xl и установить ее значение 1280 пикселей, вот рабочий пример в Sass:

// theme.scss
// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px, // Custom xl breakpoint
  xxl: 1900px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

В этом примере вы успешно расширили точки останова Bootstrap, включив в них собственную точку останова размером 1280 пикселей, а также соответствующим образом настроили максимальную ширину контейнера.