Extending Bootstrap 5 Utitlies
Jan 3, 2023 • Ben Sochar
Bootstrap 5 builds on 4’s utilties - in a way it’s getting closer to Tailwind. With the new utilties API, you can easily add your own or override default ones. This gives you a lot more flexibility & customization while keeping with the pattern of Bootstrap.
It’s also a great way to reuse code accross projects.
Create a new file called
1 |
_bootstrap_extended.scss |
# 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
)
);
Let’s add a way to change our background positions. I want to stay with the language that Bootstrap uses around left to right/right to left. So I’m going to use start instead of left & end instead of right.
$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
1 |
bg-position-center |
1
responsive: true
we can align the image to the left on large screens by using the class
1
bg-position-lg-start
.
Using State for interactive styles
If want to change it so it only works on hover we can use the
1 |
state |
$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
1 |
bg-position-center-hover |
Reusing Styles
Since these utilites merge into previous ones we can add some styles that would help on other projects. I think these scroll utilites are useful:
$utilities: map-merge(
$utilities,
(
"overflow-x": (
property: overflow-x,
responsive: true,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
responsive: true,
values: auto hidden visible scroll,
),
"scroll-behavior": (
property: scroll-behavior,
class: scroll-behavior,
responsive: true,
values: (
'auto': auto,
'smooth': smooth
)
),
"scroll-snap-align": (
property: scroll-snap-align,
class: scroll-snap-align,
responsive: true,
values: (
'none': none,
'start': start,
'both': start end,
'center': center,
'end': end
)
),
"scroll-snap-type": (
property: scroll-snap-type,
class: scroll-snap-type,
responsive: true,
values: (
'none': none,
'x': x proximity,
'y': y proximity,
'block': block,
'inline': inline,
'both': both
)
)
)
);
As long as we use Bootstrap’s varibles we can reuse these utilties on other projects in the future. Here I’ve added some styles to set dimensions of elements baased on the
1 |
$position-values |
$utilities: map-merge(
$utilities,
(
"min-height": (
property: min-height,
class: mnh,
values: map-merge($position-values,
(
auto: auto,
none: none,
)
)
),
"height": (
property: height,
class: h,
values: map-merge($position-values,
(auto: auto)
)
),
"max-height": (
property: max-height,
class: mxh,
values: map-merge($position-values,
(none: none)
)
),
"min-width": (
property: min-width,
class: mnw,
values: map-merge($position-values,
(
auto: auto,
none: none,
)
)
),
"width": (
property: width,
class: w,
values: map-merge($position-values, (auto: auto))
),
"max-width": (
property: max-width,
class: mxw,
responsive: true,
values: map-merge($position-values,
(none: none)
)
)
)
);
Bootstrap, CSS, & SASS