Bootstrap 5 Utility API: Extending Utilities with Sass Maps

The Bootstrap 5 Utility API is a powerhouse feature for frontend architects. Instead of manually writing dozens of utility classes and responsive media queries by hand, Bootstrap uses a declarative Sass map called $utilities. The Sass compiler loops through this map and automatically generates hundreds of utility classes with responsive breakpoint variants.

The Utility API Generation Workflow

Creating a Custom Utility: cursor Classes

To generate custom utility classes for mouse cursor types (e.g. .cursor-pointer, .cursor-grab), merge your definition into $utilities before importing bootstrap/utilities/api:

// In your custom.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Define custom cursor utility
$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: (
        pointer: pointer,
        grab: grab,
        grabbing: grabbing,
        default: default,
        not-allowed: not-allowed
      )
    )
  )
);

// Compile all utilities
@import "bootstrap/scss/utilities/api";

This automatically outputs the following CSS classes across all breakpoints:

.cursor-pointer { cursor: pointer !important; }
.cursor-grab { cursor: grab !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
@media (min-width: 768px) {
  .cursor-md-pointer { cursor: pointer !important; }
}