How to Customize Bootstrap 4 Grid System Breakpoints?

Customizing Bootstrap 4 Grid System Breakpoints

In this article, we'll explore how to modify Bootstrap 4's default grid system breakpoints. This can be useful if your application requires specific breakpoint values that differ from Bootstrap's default settings, such as changing the xl breakpoint from 1200px to 1280px.

Solution for Bootstrap 4.x & 5.x

To override the grid system breakpoints globally in Bootstrap 4.x or 5.x, you need to modify the $grid-breakpoints and $container-max-widths variables before importing the Bootstrap source files. Here's an example scss code that demonstrates how to achieve this:

<code class="scss">// File: theme.scss

// Override default BT 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 BT sources
@import "~bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...</code>

By making these modifications, you can customize the breakpoints to meet the specific requirements of your application without having to recompile Bootstrap from the source files.

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