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 elements without writing custom CSS.
The $utilities contains all the utilities or the classes that are merged with $utilities map, if present. The $utilities group accepts some of the options and one such option is responsive.
The responsive option of the utilities map takes a boolean as its value, indicating if responsive classes need to be generated or not. It is false by default.
Syntax:
$utilities: (
"text-color": (
responsive : true
)
);
Example 1: We are customizing the Utility API, we are working on the text-color class by adding some values to it and adding the responsive property to it.
style.scss
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$utilities: ( "text-color": (
property: color,
class: text - color,
responsive: true,
values: (
"white": rgb(255, 255, 255),
"red": rgb(255, 0, 0))
)
); @import "./node_modules/bootstrap/scss/bootstrap.scss"
|
Now we can see that we are able to add the newly generated responsive classes as well like “text-color-sm-red” or “text-color-lg-white”, which will help to provide different text colors for different screen sizes.
index.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Using the API
Enable responsive
</h3>
<div class="container bg-dark">
<h1 class="text-color-sm-red text-color-lg-white">
Welcome User
</h1>
</div>
</div>
</body>
</html>
|
Output:
We can see that for large screen devices the text color is white, then for small devices, it is red.
Example 2: In this example, we are customizing the utility API with the height property, we are setting the responsive property as true and adding some values to it.
style.scss
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$utilities: ( "height": (
property: height,
responsive: true,
values: (
0:0%,
50:50%,
100:100%,
auto:200px)
)
); @import "./node_modules/bootstrap/scss/bootstrap.scss"
|
index.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Using the
API Enable responsive
</h3>
<div class="bg-success height-auto">
<div class="bg-dark height-sm-0 height-50">
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive