Unlock the Hidden Features of Bootstrap 5 (and How To Use Them)

What is Bootstrap 5?

Bootstrap 5 is the latest major release from Bootstrap, which is an open-source framework for HTML, Javascript, and CSS. In a massive leap from previous versions, Bootstrap 5 can also be used with SCSS — a more advanced version of CSS-Cascading Style Sheets.

  • Helping create websites that are more appealing from a UX perspective,
  • Catering to accessibility standards, and
  • Automating the process of development, making it much faster, easier, and cleaner.

When was Bootstrap 5 Released?

After several alpha and beta versions released prior to the stable rollout, Bootstrap 5 was officially launched on May 5, 2021.

Unlocking the Hidden Features of Bootstrap 5

This latest and major version of the free frontend framework came with a lot of new exciting features; some of these were instantly recognized by frontend developers and designers — but those weren’t all.

Automatically Set Foreground Color according to Background

While developing a website or an application, there is an accessibility requirement that a good contrast is needed between the color of the text and the background color that the text is written on.

$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Note: This is the standard Bootstrap way of storing values in an Object in the form of key-value pair: $variable : ( “key” : value ).
$min-contrast-ratio: 4.5;@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";@return $max-ratio-color;
@each $color, $value in $theme-colors {
.card.bg-#{$color} {
$card-background-color: $value;
color: color-contrast($card-background-color,$body-color);
}
}

Minimize Codes For Bootstrap 5 Maps

Another addition to the list of Bootstrap 5 utilities, developers now have the ability to automate the process of creating huge maps with several values.

$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * 0.125,
2: $spacer * 0.25,
3: $spacer * 0.375,
4: $spacer * 0.5,
5: $spacer * 0.625,
6: $spacer * 0.75,
7: $spacer * 0.875,
8: $spacer,
9: $spacer * 1.125,
10: $spacer * 1.25,
11: $spacer * 1.375,
12: $spacer * 1.5,
13: $spacer * 1.625,
14: $spacer * 1.75,
15: $spacer * 1.875,
16: $spacer * 2,
17: $spacer * 2.125,
18: $spacer * 2.25,
19: $spacer * 2.375,
20: $spacer * 2.5,
21: $spacer * 2.625,
22: $spacer * 2.75,
23: $spacer * 2.875,
24: $spacer * 3,
25: $spacer * 3.125,
26: $spacer * 3.25,
27: $spacer * 3.375,
28: $spacer * 3.5,
29: $spacer * 3.625,
30: $spacer * 3.75
);
$spacers: ();
@for $i from 0 through 30 {
$spacers: map-merge($spacers , ($i: '$spacer' + '*' + #{$i*0.125}));
}
@debug $spacers;
$position-values: (
0: 0,
25: 25%,
50: 50%,
75: 75%,
100: 100%
);
$position-values: (0: 0);@for $i from 1 through 4 {
$i: 25 * $i;
$position-values: map-merge($position-values , (#{$i} : #{$i} + '%'));
}
@debug $position-values;
Note: In for loop, if "through" is used, the final number is included; if "to" is used, it is excluded.
$border-widths: (
1: 1px,
2: 2px,
3: 3px,
4: 4px,
5: 5px
);
$border-widths: ();
@for $i from 1 through 5 {
$border-widths: map-merge($border-widths , ($i: #{$i + "px"}));
}
@debug $border-widths;

Make Utility Classes Responsive

Further extending its capabilities from its predecessor, version 4, Bootstrap 5 also provides responsive utility classes. In Bootstrap 4, these were fixed values.

$utilities: map-merge(
$utilities,
(
// scss-docs-start utils-vertical-align
'align':
(
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top,
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
'float':
(
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
),
),
… more lines
)
)
'width':
(
property: width,
class: w,
values: (
25: 25%,
33: 33.33%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
),
),
'width':
(
responsive:true,
property: width,
class: w,
values: (
25: 25%,
33: 33.33%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
),
),

Define State Properties

Since this rollout of Bootstrap has inherited some object-oriented features that weren’t previously available, it now also offers the capability to define state properties. This speeds up and improves a previously very time-consuming and tedious process where developers would have to write a separate code and input values manually to apply the same command that would be used on multiple variables.

$utilities: (
"opacity": (
property: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output: .opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Takeaway

Bootstrap has historically been a popular tool amongst developers, but with the new Bootstrap 5 components, small and large companies alike are quick to recognize the value of adopting this free tool. Perhaps the biggest and most evident benefit offered is the ability to automate development using the SCSS functions and mixins that reduce the code while minifying output files mostly by using inheritance and other object-oriented programming (OOP) features.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
mobileLIVE

mobileLIVE

One of Canada’s fastest-growing technology companies, helping brands accelerate their #DigitalTransformation.