Bootstrap 5 Using the API Remove utilities

Last Updated : 01 Aug, 2023

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";