Remplacement des points d'arrêt du système de grille Bootstrap 4.x et 5.x

Pour personnaliser le point d'arrêt xl de Bootstrap, il est crucial de comprendre les variables qui régissent points d'arrêt et largeurs de conteneur.

sass
Dans votre build Sass, vous allez devez modifier deux variables : $grid-breakpoints et $container-max-widths. Ces variables définissent les seuils de taille auxquels le système de grille Bootstrap et les éléments du conteneur se restructureront.

Dans le code Sass fourni, vous avez correctement ajusté les $grid-breakpoints pour inclure un point d'arrêt de 1 280 px. Cependant, pour que les modifications prennent effet, vous devez également modifier la variable $container-max-widths.

Exemple de travail
Pour remplacer le point d'arrêt xl et le définir sur 1 280 px, voici un exemple fonctionnel dans 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...

Dans cet exemple, vous avez réussi à étendre les points d'arrêt de Bootstrap pour inclure votre point d'arrêt personnalisé de 1 280 px tout en ajustant également la largeur maximale du conteneur en conséquence.