How do I create a custom utility with the utilities API (e.g., cursor-pointer)?

Asked on Jul 22, 2025

1 Answer

To create a custom utility using Bootstrap's utilities API, you can extend Bootstrap's default utilities by modifying the `scss` files. Here's a simple example to create a `cursor-pointer` utility.

<!-- BEGIN COPY / PASTE -->
        // Step 1: Create a custom SCSS file (e.g., _custom-utilities.scss)

        @import "node_modules/bootstrap/scss/functions";
        @import "node_modules/bootstrap/scss/variables";
        @import "node_modules/bootstrap/scss/maps";
        @import "node_modules/bootstrap/scss/mixins";

        // Step 2: Define the custom utility
        $utilities: map-merge(
          $utilities,
          (
            "cursor": (
              property: cursor,
              class: cursor,
              values: pointer
            )
          )
        );

        // Step 3: Import Bootstrap utilities
        @import "node_modules/bootstrap/scss/utilities";
        <!-- END COPY / PASTE -->

Additional Comment:

Create a new SCSS file (e.g., _custom-utilities.scss) in your project.
Import necessary Bootstrap SCSS files for functions, variables, maps, and mixins.
Use the `map-merge` function to add your custom utility to the existing `$utilities` map.
Import the Bootstrap utilities SCSS file to apply the changes.
Compile your SCSS to CSS using a preprocessor like Sass.

This approach allows you to add custom utilities without modifying Bootstrap's core files.
Ensure your build process compiles the SCSS into CSS for the changes to take effect.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions