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

Asked on Jul 24, 2025

1 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.

← Back to All Questions