Bootstrap 5 Streamlining Utility Classes with Updated Naming Convention and Sass API

Bootstrap Utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Utility API is based on a series of Sass maps and functions for generating families of classes with various options. Bootstrap 5 has introduced a new set of utility class names that have been renamed to make them more consistent and easier to remember. The utility classes are used to quickly apply styles to HTML elements without writing custom CSS. This update includes changes to the class names for margin, padding, and border utilities.

Syntax: The new class names for margin and padding utilities are as follows:

• .ms-* for margin utilities
• .ps-* for padding utilities
• .bs-* for border utilities

The utility API can be used to override the resulting class of a given utility – for example, to rename .ms-* utilities to oldish .ml-*: Here the margin start utility which is new has been renamed to margin-left which is the old style.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
     $utilities, (
           "margin-start": map-merge(
             map-get($utilities, "margin-start"),
             ( class: ml ),
           ),
     )
);

Example 1: Changing margin and padding utility classes

The old convention of writing the margin and padding utility. This is then modified in the further code with the new margin and padding utility class.

Before:

After: Renaming the margin and padding classes as ms and ps respectively. In the updated code, we’ve replaced the margin and padding class with ms and ps respectively, which is the new margin and padding utility class in Bootstrap 5. 

Output

 The output remains the same for both cases.

Example 2: Renaming the border utility.

The old convention of writing border utility class. This is then modified in the further code with the new border utility class.

Before

After: In the updated code, we’ve replaced the border class with bs, which is the new border utility class in Bootstrap 5. We’ve also added the border-danger class to set the border color to red, and the ps-3 class to add padding to the element on the left side.

Output:

 The output remains the same for both cases.