Extending Bootstrap 5 Utitlies
Jan 3, 2021 • Ben Sochar
Bootstrap 5 builds on 4’s utilties but now you can easily add your own.
Create a new file called _bootstrap_extended.scss
& add the required Bootstrap imports:
# import the required files
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables'; # This should be your localized varibles file.
@import 'bootstrap/scss/utilities';
$utilities: map-merge(
$utilities,
(
# styles go here
)
);
Here’s what we can do with them. Let’s add a way to change our background positions:
# import the required files
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables'; # This should be your localized varibles file.
@import 'bootstrap/scss/utilities';
$utilities: map-merge(
$utilities,
(
'bg-position': (
property: background-position, # the CSS property
class: bg-position, # the class name we use in HTML
responsive: true,
values: (
'top': top,
'end': right,
'bottom': bottom,
'start': left,
'center': center,
'inherit': inherit
)
)
)
);
Now we can use bg-position-center
to center a background image. And since we added responsive: true
we can align the image to the left on large screens by using the class bg-position-lg-start
.
If want to change it so it only works on hover we can use the state
option:
# import the required files
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables'; # This should be your localized varibles file.
@import 'bootstrap/scss/utilities';
$utilities: map-merge(
$utilities,
(
'bg-position': (
property: background-position, # the CSS property
class: bg-position, # the class name we use in HTML
state: hover,
values: (
'top': top,
'end': right,
'bottom': bottom,
'start': left,
'center': center,
'inherit': inherit
)
)
)
);
So if we add bg-position-center-hover
to an element the image will only center on hover.
Bootstrap & CSS