How do I add a custom breakpoint between md and lg with Sass?

Asked on Jul 24, 2025

Answer

In Bootstrap 5, you can add custom breakpoints using Sass by defining your own breakpoint map. This allows you to create a breakpoint between the existing `md` and `lg` breakpoints. Here's how you can do it:

<!-- BEGIN COPY / PASTE -->
        $grid-breakpoints: map-merge(
          $grid-breakpoints,
          (
            'custom': 900px
          )
        );

        @include media-breakpoint-up(custom) {
          .example-class {
            background-color: lightblue;
          }
        }
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `map-merge` function to add a new breakpoint to the existing `$grid-breakpoints` map.
The custom breakpoint is named 'custom' and set at 900px.
Use the `media-breakpoint-up` mixin to apply styles at the 'custom' breakpoint.
Customize the `.example-class` with any styles you need for the new breakpoint.

✅ Answered with Bootstrap 5 best practices.