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="https://www.w3wiki.net./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" >w3wiki</ 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
After writing custom.scss
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" >w3wiki</ 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
After Writing custom.scss
Bootstrap 5 Using the API Remove utilities
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.