Bootstrap Utility

To use Bootstrap Utility, we need a Sass Compiler. This feature relies on dynamically generating CSS maps using Sass. You can use the Live Sass Compiler for Visual Studio Code. After installing this extension, we need to import the Bootstrap files required for Utility. These are:

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";

After importing our page, we are making the necessary utility definitions. After the definitions, we need to perform another import operation at the bottom of the page.

@import "./node_modules/bootstrap/scss/bootstrap.scss";

We can now make the utility definitions in between these two import operations.

To utilize the Bootstrap Utility feature, we need to define two mandatory fields: property and values. Let's now examine the following example:

$utilities: (
  "custom-width": (
    property: width,
    values: (
      10: 10%,
      20: 20%,
      30: 30%,
      40: 40%,
      50: 50%,
      60: 60%,
      70: 70%,
      80: 80%,
      90: 90%,
      100: 100%,
    ),
   ),
 );

As seen in this code block, the Utility is initialized as $utility:(). After that, we define a name for the created class for our purposes. After defining it as "custom-width", we specify in the property section which CSS property this class will affect. In the values section, we make our definitions in the format of name:value.

After making our definitions, Sass automatically runs and generates a CSS file for us, as shown below:

.width-10 {
 width: 10% !important;
}
.width-20 {
 width: 20% !important;
}
.width-30 {
 width: 30% !important;
}
.width-40 {
 width: 40% !important;
}
.width-50 {
 width: 50% !important;
}
.width-60 {
 width: 60% !important;
}

As seen in the example, Bootstrap Utility allows us to quickly generate new classes for our custom theme. Now, we can access the class related to width as .width-"value". Additionally, if desired, we can prepend a prefix to the classes using the class property.

 "custom-border": (
       property: border,
       responsive: true,
       class:c-border,
       values: (
         slim: 3px solid #852929,
         medium: 5px solid #852929,
         bold: 7px solid #852929,
       ),
     ),

If you make class definitions as indicated in the code block below, you can access and use our classes as shown:

.c-border-slim {
 border: 3px solid #852929 !important;
}
.c-border-medium {
 border: 5px solid #852929 !important;
}
.c-border-bold {
 border: 7px solid #852929 !important;
}

Bootstrap Utility indeed has an optional feature called Responsive, which allows for easy creation of responsive classes. The responsive: true statement in the previous code block activates this feature. Along with the three classes shown in the previous code block, an additional 15 classes are generated for responsive designs.

Here are the code blocks showcasing the class definitions created for the responsive-md screens:

.c-border-md-slim {
   border: 3px solid #852929 !important;
 }
 .c-border-md-medium {
   border: 5px solid #852929 !important;
 }
 .c-border-md-bold {
   border: 7px solid #852929 !important;
 }

One of the useful features that come with Utility is Rfs (Responsive Font Size), which stands for Responsive Font Size. With Rfs, Bootstrap can automatically calculate the font size for mobile devices.

 "font-size": (
   rfs: true,
   property: font-size,
   class: mfs,
   values: $font-size,
 ),

Yukarıda ki kod bloğunda values:$font-sizes şeklinde bir tanımlama yapıldığını görüyoruz. Bu tanımlama daha önce import ettiğimiz _variables.scss dosyasında ki $font-sizes  tanımından gelmektedir. Bu sayede values kısmına herhangi bir değer girmeden daha öncesinde hazırlamış olduğumuz global tanımlamaları kullanabiliyoruz. 

.mfs-1 {
 font-size: calc(1.375rem + 1.5vw) !important;
}
.mfs-2 {
 font-size: calc(1.325rem + 0.9vw) !important;
}
.mfs-3 {
 font-size: calc(1.3rem + 0.6vw) !important;
}
.mfs-4 {
 font-size: calc(1.275rem + 0.3vw) !important;
}
.mfs-5 {
 font-size: 1.25rem !important;
}
.mfs-6 {
 font-size: 1rem !important;
}

In the above code block, we can see a definition values: $font-sizes, which is derived from the $font-sizes definition in the _variables.scss file that we imported earlier. This allows us to use the global definitions we previously prepared without explicitly entering any values in the values section.