Bootstrap Q&A Logo
Bootstrap Q&A Part of the Q&A Network
Real Questions. Clear Answers.
Ask any question about Bootstrap here... and get an instant response.
Q&A Logo Q&A Logo

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:
  1. Define your custom utilities in a SCSS map, specifying the property, class prefix, and values.
  2. Import the necessary Bootstrap SCSS files to access the utilities API.
  3. 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.
✅ Answered with Bootstrap 5 best practices.
← Back to All Questions

Q&A Network
The Q&A Network
Bootstrap
Ask Questions / Get Answers about Bootstrap!
Web Languages
Ask Questions / Get Answers about Web Languages!
Security
Ask Questions / Get Answers about Website Security!
Performance
Ask Questions / Get Answers about Web Vitals!
AI
Ask Questions / Get Answers about AI!
AI Audio
Ask Questions / Get Answers about AI Audio!
AI Design
Ask Questions / Get Answers about AI Design!
Networking
Ask Questions / Get Answers about Networking!
SEO
Ask Questions / Get Answers about SEO!
Robotics
Ask Questions / Get Answers about Robotics!
AI Writing
Ask Questions / Get Answers about AI Writing!
AI Marketing
Ask Questions / Get Answers about AI Marketing!
MobileDev
Ask Questions / Get Answers about Mobile Developement!
JavaScript
Ask Questions / Get Answers about JavaScript!
Web Development
Ask Questions / Get Answers about Web Development!
DevOps
Ask Questions / Get Answers about DevOps!
Data Science
Ask Questions / Get Answers about Data Science!
Cloud Computing
Ask Questions / Get Answers about Cloud Computing!
WordPress
Ask Questions / Get Answers about WordPress!
VR & AR
Ask Questions / Get Answers about VR & AR!
AI Video
Ask Questions / Get Answers about AI Video!
HTML
Ask Questions / Get Answers about HTML!
Tailwind
Ask Questions / Get Answers about Tailwind!
Photography
Ask Questions / Get Answers about Photography!
Video Editing
Ask Questions / Get Answers about Video Editing!
Cybersecurity
Ask Questions / Get Answers about Cybersecurity!
AI Coding
Ask Questions / Get Answers about AI Coding!
IoT
Ask Questions / Get Answers about IoT!
Film Production
Ask Questions / Get Answers about Film Production!
AI Images
Ask Questions / Get Answers about AI Images!
AI Education
Ask Questions / Get Answers about AI Education!
Monetization
Ask Questions / Get Answers about Ad & Monetization!
Graphic Design
Ask Questions / Get Answers about Graphic Design!
AI Business
Ask Questions / Get Answers about AI Business!
Chatbots
Ask Questions / Get Answers about Chatbots!
Web Hosting
Ask Questions / Get Answers about Hosting!
Quantum
Ask Questions / Get Answers about Quantum Computing!
AI Ethics
Ask Questions / Get Answers about AI Ethics!
Analytics
Ask Questions / Get Answers about Analytics!
CSS
Ask Questions / Get Answers about CSS!