Anulación de los puntos de interrupción del sistema Grid de Bootstrap 4.x y 5.x

Para personalizar el punto de interrupción xl de Bootstrap, es crucial comprender las variables que gobiernan puntos de interrupción y anchos de contenedores.

sass
En tu compilación de Sass, necesitarás modificar dos variables: $grid-breakpoints y $container-max-widths. Estas variables definen los umbrales de tamaño en los que el sistema de cuadrícula Bootstrap y los elementos del contenedor se reestructurarán.

En el código Sass proporcionado, ajustó correctamente los $grid-breakpoints para incluir un punto de interrupción de 1280 px. Sin embargo, para que los cambios surtan efecto, también debes modificar la variable $container-max-widths.

Ejemplo de trabajo
Para anular el punto de interrupción xl y establecerlo en 1280px, aquí hay un ejemplo funcional en 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...

En este ejemplo, ha extendido con éxito los puntos de interrupción de Bootstrap para incluir su punto de interrupción personalizado de 1280 px y, al mismo tiempo, ha ajustado el ancho máximo del contenedor en consecuencia.