How to Override Bootstrap 4.x & 5.x Grid System Breakpoints?

Overriding Bootstrap 4.x & 5.x Grid System Breakpoints

To customize Bootstrap's xl breakpoint, it's crucial to understand the variables that govern breakpoints and container widths.

sass
In your Sass build, you'll need to modify two variables: $grid-breakpoints and $container-max-widths. These variables define the size thresholds at which the Bootstrap grid system and container elements will restructure themselves.

In the provided Sass code, you've correctly adjusted the $grid-breakpoints to include a 1280px breakpoint. However, for the changes to take effect, you must also modify the $container-max-widths variable.

Working Example
To override the xl breakpoint and set it to 1280px, here's a working example in Sass:

<code class="scss">// 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...</code>

In this example, you've successfully extended Bootstrap's breakpoints to include your custom 1280px breakpoint while also adjusting the container's maximum width accordingly.

The above is the detailed content of How to Override Bootstrap 4.x & 5.x Grid System Breakpoints?. For more information, please follow other related articles on the PHP Chinese website!