Components, meet the Utility API

New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.

Quickly customize components

Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from positioning and sizing to colors and effects. Mix them with CSS variable overrides for even more control.

{{ highlight (printf ` `) "html" "" }}

Explore customized components

Create and extend utilities

Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.

{{ highlight (printf `@import "bootstrap/scss/bootstrap"; $utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, responsive: true, values: auto pointer grab, ) ) ); `) "scss" "" }}

Explore the utility API