Bootstrap 5 Streamlining Utility Classes with Updated Naming Convention and Sass API
Last Updated :
05 Jun, 2023
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:
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG Example</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container mx-5 py-5 ">
<h1>Hello, World!</h1>
<p>This is some sample text.</p>
</div>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG Example</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container ms-5 ps-5 ">
<h1>Hello, World!</h1>
<p>This is some sample text.</p>
</div>
</body>
</html>
|
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
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG Example</title>
<link href=
rel="stylesheet">
</head>
<body>
<h2>Welcome To GFG</h2>
<div class="p-3 border rounded border-danger">
This element has a red border,
rounded corners, and padding.
</div>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href=
rel="stylesheet">
</head>
<body>
<h2>Welcome To GFG</h2>
<div class="bs border border-danger rounded ps-3">
This element has a red border,
rounded corners, and padding.
</div>
</body>
</html>
|
Output:
The output remains the same for both cases.
Share your thoughts in the comments
Please Login to comment...