How to Customize Bootstrap 4 Breakpoints Without Recompiling?

How to Customize Bootstrap 4 Breakpoints

You wish to modify the xl breakpoint from 1200 to 1280 globally in Bootstrap 4. However, assigning new values to Bootstrap's $grid-breakpoints variable doesn't seem to change the xl breakpoint. Do you need to recompile Bootstrap from scratch to accomplish this?

The Solution: Override Variables Before Import

The key to customizing Bootstrap 4 breakpoints is to override the $grid-breakpoints and $container-max-widths variables before importing the Bootstrap sources. Here's how to do it in Sass:

<code class="scss">// theme.scss
// Override default Bootstrap variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap sources
@import "~bootstrap/scss/bootstrap";

// Custom CSS rules here...</code>

Now, the xl breakpoint will be globally set to 1280px, and any Bootstrap styles dependent on breakpoints, such as container widths, will adjust accordingly.

The above is the detailed content of How to Customize Bootstrap 4 Breakpoints Without Recompiling?. For more information, please follow other related articles on the PHP Chinese website!