The Bootstrap Utilities are generated with the Bootstrap utility API. It may be used to change or add to the default set of utility lessons by way of Sass.
For producing new households of lessons with numerous choices it makes use of Sass maps and capabilities. The utility API helps to rapidly apply types to HTML components with out writing customized CSS.
The $utilities comprises all the utilities or the lessons which can be merged with $utilities map, if current. The $utilities group accepts a number of the choices and one such possibility is responsive.
The responsive possibility of the utilities map takes a boolean as its worth, indicating if responsive lessons have to be generated or not. It’s false by default.
Syntax:
$utilities: (
"text-color": (
responsive : true
)
);
Instance 1: We’re customizing the Utility API, we’re engaged on the text-color class by including some values to it and including the responsive property to it.
model.scss
CSS
@import "./node_modules/bootstrap/scss/capabilities";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$utilities: (
"text-color": (
property: shade,
class: textual content - shade,
responsive: true,
values: (
"white": rgb(255, 255, 255),
"pink": rgb(255, 0, 0))
)
);
@import "./node_modules/bootstrap/scss/bootstrap.scss"
|
Now we are able to see that we’re in a position so as to add the newly generated responsive lessons as nicely like “text-color-sm-red” or “text-color-lg-white”, which can assist to offer totally different textual content colours for various display screen sizes.
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material=
"width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Suitable" content material="ie=edge">
<title>My Web site</title>
<hyperlink rel="stylesheet" href="./model.css">
</head>
<physique>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Utilizing the API
Allow responsive
</h3>
<div class="container bg-dark">
<h1 class="text-color-sm-red text-color-lg-white">
Welcome Person
</h1>
</div>
</div>
</physique>
</html>
|
Output:
We are able to see that for big display screen units the textual content shade is white, then for small units, it’s pink.
Instance 2: On this instance, we’re customizing the utility API with the peak property, we’re setting the responsive property as true and including some values to it.
model.scss
CSS
@import "./node_modules/bootstrap/scss/capabilities";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$utilities: (
"top": (
property: top,
responsive: true,
values: (
0:0%,
50:50%,
100:100%,
auto:200px)
)
);
@import "./node_modules/bootstrap/scss/bootstrap.scss"
|
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material=
"width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Suitable" content material="ie=edge">
<title>My Web site</title>
<hyperlink rel="stylesheet" href="./model.css">
</head>
<physique>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Utilizing the
API Allow responsive
</h3>
<div class="bg-success height-auto">
<div class="bg-dark height-sm-0 height-50">
</div>
</div>
</div>
</physique>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive
