Software Development

Bootstrap 5 Using the API Enable Responsive


Improve Article

Save Article

Like Article

Improve Article

Save Article

Like Article

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

CSS

@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

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:

20230626_112735.gif

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

CSS

@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

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:

20230626_123447.gif

Reference: https://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive

Last Updated :
24 Jul, 2023

Like Article

Save Article