When you’re designing layouts, there aren’t always enough default utilities. Developers often add the necessary code themselves to CSS files, but this isn’t good practice. Any utility can be created using Bootstrap, which means not deviating from the framework, and accelerating the creation of custom utilities.
Create a utility that allows you to change the cursor type when hovering over an HTML element. To begin with, it’s worth determining which classes will be needed as utility values. Most websites use the pointer cursor. Let’s also create default and none.
We’ll get the following classes:
-
cursor-pointer
-
cursor-default
-
cursor-none
Starting with Bootstrap 5 all utilities are generated automatically. To this end, the necessary values are added to the variable $utilities
. After compiling all the source files, the utilities will appear in the main CSS file. To get a better idea of how utilities are generated, it’s worth taking a look at the existing utilities.scss
. It contains all the utilities that are generated by _Bootstrap by default. As an example, let’s look at how the justify-content
utility was created:
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
)
At first, seeing so many different values may be confusing or scary, but once you create your own utility, you’ll see how much easier this API makes life for developers. Which array keys are represented here?
-
responsive
— do you want to create utilities for different screen resolutions? If responsive is true
, utilities will be created with the prefixes -sm-
, -md-
, -lg-
and so on
-
property
— the name of the CSS property. In this case, it’s justify-content
-
values
— the values the property can take. There are several variations of how values can be set that are possible here. For the justify-content
property, we also specify aliases, i.e., alternative names, so we can get readable class names when generating utilities. Compare:
/* No aliases specified */
.justify-content-space-around {
justify-content: space-around;
}
/* Alias specified */
.justify-content-around {
justify-content: space-around;
}
In addition to these keys, there are several others:
"justify-content": (
responsive: true,
property: justify-content,
class: jc,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
)
.jc-around {
justify-content: space-around;
}
"justify-content": (
responsive: true,
property: justify-content,
state: hover,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
)
.justify-content-around-hover:hover {
justify-content: space-around;
}
*Only the property
and values
keys are mandatory. Other keys are used based on the developer’s needs
Creating a cursor
utility is now a fairly simple task - you need to add the new utility to the $utilities
variable and compile the project. Note that the creation of the utility is done through the map-merge
function
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
values: pointer grab help progress,
),
)
);
After compilation, the following classes will be added to the main CSS file:
.cursor-pointer {
cursor: pointer !important;
}
.cursor-grab {
cursor: grab !important;
}
.cursor-help {
cursor: help !important;
}
.cursor-progress {
cursor: progress !important;
}