Ask any question about Bootstrap here... and get an instant response.

How can I use SCSS maps to create custom utility classes in Bootstrap for unique spacing needs?

Asked on Dec 14, 2025

Answer

In Bootstrap 5, you can use SCSS maps to create custom utility classes for unique spacing needs by defining your own spacing scale and generating utility classes from it. This allows you to maintain consistent spacing throughout your project.

<!-- BEGIN COPY / PASTE -->
        // Define a custom spacing scale
        $custom-spacing: (
          '3xs': 0.125rem,
          '2xs': 0.25rem,
          'xs': 0.5rem,
          'sm': 0.75rem,
          'md': 1rem,
          'lg': 1.5rem,
          'xl': 2rem,
          '2xl': 3rem,
          '3xl': 4rem
        );

        // Merge with Bootstrap's default spacing scale
        $spacers: map-merge($spacers, $custom-spacing);

        // Import Bootstrap utilities to generate classes
        @import "bootstrap/scss/utilities";
        <!-- END COPY / PASTE -->

Additional Comment:

Use SCSS maps to define a custom spacing scale with key-value pairs.
Merge your custom spacing map with Bootstrap's default `$spacers` map using `map-merge`.
Import the `utilities` module from Bootstrap to generate the utility classes based on the merged spacers map.
This approach allows you to use classes like `.p-3xs`, `.m-lg`, etc., for padding and margin.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I use SCSS maps to create custom utility classes in Bootstrap for unique spacing needs?

Asked on Dec 14, 2025

Answer

The Q&A Network