Substituindo pontos de interrupção do sistema de grade do Bootstrap 4.x e 5.x

Para personalizar o ponto de interrupção xl do Bootstrap, é crucial entender as variáveis ​​​​que governam pontos de interrupção e larguras de contêiner.

sass
Em sua compilação Sass, você precisará modificar duas variáveis: $grid-breakpoints e $container-max-widths. Essas variáveis ​​definem os limites de tamanho nos quais o sistema de grade Bootstrap e os elementos do contêiner serão reestruturados.

No código Sass fornecido, você ajustou corretamente os $grid-breakpoints para incluir um ponto de interrupção de 1280px. No entanto, para que as alterações tenham efeito, você também deve modificar a variável $container-max-widths.

Exemplo de trabalho
Para substituir o ponto de interrupção xl e defini-lo como 1280px, aqui está um exemplo funcional em 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...

Neste exemplo, você estendeu com sucesso os pontos de interrupção do Bootstrap para incluir seu ponto de interrupção personalizado de 1280px e também ajustou a largura máxima do contêiner de acordo.