Bootstrap - Bootstrap Utilities API (Creating Custom Utility Classes)

Bootstrap 5 introduced the Utilities API, which allows developers to generate their own utility classes using Sass. This is an advanced feature not commonly covered in beginner tutorials.

Normally, Bootstrap provides ready-made utility classes like:

• mt-3 (margin-top)

• text-center

• d-flex

• bg-primary

But what if you need a custom spacing value or a new property? Instead of writing separate CSS manually, you can define it using Bootstrap’s utility configuration in Sass.

Example concept:
You can create custom utilities like:

• opacity-85

• shadow-soft

• z-100

This is done by editing the $utilities map in Bootstrap’s Sass files before compiling.

Why this is important:

• Maintains consistency with Bootstrap’s system

• Reduces custom CSS clutter

• Keeps naming structured and scalable

• Useful in large projects with design systems

The Utilities API is mainly used in professional projects where teams need standardized styling rules without writing repetitive CSS.

To use it, Bootstrap must be installed via NPM + Sass, not CDN.

In simple terms:
Instead of fighting Bootstrap with custom CSS, you extend Bootstrap properly using its built-in system.