Bootstrap 5 Using the API Remove utilities
Last Updated :
24 Apr, 2025
Bootstrap 5 provides a set of utility classes for various use cases and with them Bootstrap also provides a utility API to modify, add or remove these utility classes by using Sass. This utility API is based on the Sass maps named $utility. We create our own $utility map and merge it with the default one. Along with adding and modifying utility APIs, Bootstrap provides remove API to remove any of the default utility classes. In this article, we’ll see everything about Bootstrap removing utility APIs.
Remove Utility in RTL
Sometimes RTL styling may be difficult to use for some edge cases therefore Bootstrap 5 provides us this facility to drop the utilities from RTL output by setting the RTL option to false.
RTL option:
This option allows us to disable the RTL styling for specific utilities. Let’s see the syntax to remove the RTL styling for the float utility.
Syntax:
$utilities: (
"float": (
rtl: false
),
);
Ways to remove the utility:
- using map-remove(): It accepts multiple arguments. The first argument should be the $utility map followed by the name of the classes to be removed from the $utilities map.
- using map-merge(): Here to remove the utility we set the key of the $utilities map to null. It accepts two maps. The first one is the $utilities map and the second is the new map.
Syntax:
$utilities: map-remove($utilities, class1, class2, ...)
$utilities: map-merge($utilities, ("class_name":null))
Steps to Use Bootstrap 5 API Remove Utilities
Step 1: Initiate Node Package Modules using the below CLI command.
npm init
Step 2: Install Bootstrap in the project modules for usage.
npm install bootstrap sass
Step 3: Create the custom Scss file, and import the bootstrap Scss functions.
@import "node_modules/bootstrap/scss/functions.scss";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";
// Remove multiple utilities with a comma-separated list
// $utilities: map-remove($utilities, "width", "float");
@import "node_modules/bootstrap/scss/utilities/api";
Step 4: Compile the custom Scss file to a designated CSS file.
sass custom.scss custom.css
Step 5: Link the compiled CSS file inside the <head> tag of the HTML file.
<link rel="stylesheet" href="./custom.css">
Example 1: In this example, we’ll use method 1 to remove the utility classes from the components. Here we’ll be removing color and float classes from the Bootstrap utilities and therefore after compiling our Scss classes, we’ll see that these classes will be ineffective.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./custom.css">
<title>Bootstrap remove utility</title>
</head>
<body>
<div class="container" style="width: 30%;">
<h1 class="text-success">GeeksForGeeks</h1>
<div class="float-start">This is float 1</div><br>
<div class="float-end">This is float 2</div><br>
<div class="float-none">This is float 3</div>
</div>
</body>
</html>
|
custom.scss
CSS
@import "node_modules/bootstrap/scss/functions.scss";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";
// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "color", "float");
@import "node_modules/bootstrap/scss/utilities/api";
|
Output: Before Writing custom.scss
Before removing utilities
After writing custom.scss
After removing utilities
Example 2: In this example, we’ll use the map-merge method to remove the utility classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./custom.css">
<title>Bootstrap remove utility</title>
</head>
<body>
<div class="container" style="width: 30%;">
<h1 class="text-center">GeeksForGeeks</h1>
<div>This is float 1</div><br>
<div>This is float 2</div><br>
<div>This is float 3</div>
</div>
</body>
</html>
|
custom.scss
CSS
@import "node_modules/bootstrap/scss/functions.scss";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";
// Remove multiple utilities with a comma-separated list
$utilities: map-merge($utilities, (text-align:null));
@import "node_modules/bootstrap/scss/utilities/api";
|
Output: Before Writing custom.scss
Before removing text-align utility
After Writing custom.scss
After removing text-align utility
Similar Reads
Bootstrap 5 Using the API Enable Responsive
The Bootstrap Utilities are generated with the Bootstrap utility API. It can be used to modify or add to the default set of utility classes via Sass. For generating new families of classes with various options it uses Sass maps and functions. The utility API helps to quickly apply styles to HTML ele
3 min read
BootStrap 5 Utilities Margin and Padding
In Bootstrap 5, the margin and padding utilities are used to add space around elements. The margin utilities are used to add space outside of an element, while the padding utilities are used to add space inside of an element. Bootstrap 5 Utilities Margin and padding Classes: There are no different c
2 min read
ReactJS MDBootstrap Clearfix Utilities
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Clearfix Utilities in ReactJS MDBootstrap. Clearfix Utilities is used to automatically clear or fix i
2 min read
Bootstrap 5 Utilities
Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. Bootstrap 5 utilities for layout: Changing display: Bootstrap 5 provides some displa
2 min read
Bootstrap 5 Typography Text utilities
Bootstrap 5 Typography supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc. It also supports all the text color utilities. For text, the only color utility available is modifying the color of
2 min read
Bootstrap5 Columns Margin Utilities
Bootstrap5 Columns Margin utilities are used to put some margin between the sibling elements such that it pushes the sibling elements away from their position. Margin utility classes: .m*-auto: This class is used to separate sibling columns Syntax: <div class=" m*-auto"> ... </div> The '
2 min read
BootStrap 5 Utilities Changing Display
Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. BootStrap 5 Utilities Changing Display provides some display properties for setting
2 min read
Bootstrap5 Layout Utilities
Bootstrap 5 Layout Utilities facilitate mobile-friendly, responsive websites. They offer numerous utility classes for tasks like displaying, hiding, aligning, and spacing content, enabling versatile modifications tailored to different design requirements. NameDescriptionChanging displayBootstrap 5 p
2 min read
Bootstrap 5 Toasts Events
Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method. These are used to perform some tasks when these instances are triggered. Toasts Events: show.bs.toast: This event is called when show instance method of toast is called.shown.bs.toast: This event
2 min read
Bootstrap 5 Toasts Methods
Bootstrap 5 Toasts Methods are used to perform some specific tasks on toasts like the show, hide, etc methods. All the methods are mentioned below and described well, for brief clearance about those methods. Toasts are a type of alert box that is used to show a message or an update to the user. For
3 min read