Ask any question about Bootstrap here... and get an instant response.
What's the best way to create custom utility classes using SCSS maps in a Bootstrap project?
Asked on Dec 08, 2025
Answer
Creating custom utility classes using SCSS maps in a Bootstrap project allows you to extend Bootstrap's utility system efficiently. Here's how you can do it:
<!-- BEGIN COPY / PASTE -->
// 1. Define your custom utilities using SCSS maps
$utilities: (
'custom-margin': (
property: margin,
class: m,
values: (
'5': 5px,
'10': 10px,
'15': 15px,
)
),
'custom-padding': (
property: padding,
class: p,
values: (
'5': 5px,
'10': 10px,
'15': 15px,
)
)
);
// 2. Import Bootstrap's utilities API
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
// 3. Include the utilities mixin with your custom utilities
@include utilities($utilities);
<!-- END COPY / PASTE -->Additional Comment:
- Define your custom utilities in a SCSS map, specifying the property, class prefix, and values.
- Import the necessary Bootstrap SCSS files to access the utilities API.
- Use the `utilities` mixin to generate the custom utility classes from your SCSS map.
- This method ensures that your custom utilities are generated alongside Bootstrap's default utilities.
- You can adjust the values and properties in the SCSS map to fit your project's needs.
Recommended Links:
