How to customize Bootstrap's breakpoints

To customize the breakpoints of Bootstrap, it is recommended to use the Sass method. First, redefine the $grid-breakpoints and $container-max-widths variables before importing Bootstrap to match design requirements. 1. Modify the existing breakpoint value (such as changing md from 768px to 800px), 2. You can add new breakpoints (such as xxl or huge) or rename existing breakpoints, 3. Synchronize the maximum width of the container to ensure the consistent layout, 4. Use media query mixing (such as @include media-breakpoint-up(md)) to apply the responsive style, 5. Recompile Sass to generate custom CSS; if Sass cannot be used, you can try CSS coverage, but it is not recommended, because it is difficult to maintain and easily conflict-free, and you should always achieve flexible and sustainable breakpoint customization through Sass construction.

Customizing Bootstrap's breakpoints is useful when you want to align your responsive design with specific device sizes or design requirements that different from Bootstrap's defaults. Whether you're using Bootstrap with Sass (recommended) or overriding CSS, here's how to do it properly.

Modify Breakpoints Using Sass (Recommended)

If you're using Bootstrap via Sass (eg, in a project with npm, Webpack, or similar), you can customize breakpoints at compile time by overriding the Sass variables before importing Bootstrap.

1. Set up Bootstrap with Sass
   Make sure you're importing Bootstrap in a Sass file (eg, styles.scss ) rather than linking to the precompiled CSS.

   

2. Override the $grid-breakpoints and $container-max-widths variables
   Bootstrap uses two main variables:

   • $grid-breakpoints : Defines the minimum width for each breakpoint (eg, sm , md ).
   • $container-max-widths : Sets the max width of .container at each breakpoint.

   Example: Change md from 768px to 800px and add a custom xl breakpoint.

   

    // Custom breakpoints
   $grid-breakpoints: (
     xs: 0,
     sm: 576px,
     md: 800px, // Changed from 768px
     lg: 1000px, // Changed from 992px
     xl: 1400px, // Changed from 1200px
     xxl: 1600px // Optional: add a new breakpoint
   );
   
   // Update container widths to match
   $container-max-widths: (
     sm: 540px,
     md: 760px,
     lg: 960px,
     xl: 1360px,
     xxl: 1560px
   );
   
   // Now import Bootstrap
   @import "bootstrap/scss/bootstrap";

   ⚠️ Important: Define your custom variables before importing Bootstrap. Otherwise, the defaults will be used.

3. Use your custom breakpoints in media queries
   You can now use Bootstrap's responsive utilities or Sass mixins with your new values.

    .custom-element {
     @include media-breakpoint-up(md) {
       font-size: 20px;
     }
   }

   This will now trigger at 800px instead of 768px.

Add or Rename Breakpoints

You can also add new breakpoints or rename existing ones.

 $grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px, // New breakpoint
  huge: 1800px // Fully custom name
);

$container-max-widths: (
  ...,
  xxl: 1360px,
  huge: 1760px
);

Now you can use @include media-breakpoint-up(huge) in your styles.

Recompile Bootstrap

After making changes, recompile your Sass to generate the updated CSS. If you're using a build tool like Webpack, Vite, or a task runner, this happens automatically when you save.

Override with CSS (Not Recommended)

If you can't use Sass, you can override responsive utility classes with custom CSS, but this is limited and not scalable.

Example: Force .col-md-* to behave differently.

 /* Override md behavior — fragile and not recommended */
@media (min-width: 800px) {
  .custom-col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

This approach doesn't scale well and can conflict with Bootstrap's built-in classes.

Key Tips

• Always adjust both $grid-breakpoints and $container-max-widths to keep layout consistency.
• Use @include media-breakpoint-up() , -down() , and -only() for clean, readable responsive code.
• Avoid using pixel values ​​directly in your media queries—use Bootstrap's mixins to stay consistent.
• If adding a new breakpoint, update the grid system by recompiling and ensure utilities like d-xl-none work as expected.

Basically, customizing breakpoints is straightforward if you control the Sass build. Just redefine the variables before import and recompile. It's flexible and maintainable—way better than hacking CSS after the fact.

The above is the detailed content of How to customize Bootstrap's breakpoints. For more information, please follow other related articles on the PHP Chinese website!