Jump To Section
One of the most widely used open-source frameworks – and a very popular tool amongst web developers – Bootstrap launched its much-awaited fifth version (Dbootstrap 5) with the intention of creating a more “future-friendly” tool, according to the official launch announcement from Bootstrap.
Does Bootstrap 5 live up to the expectations of frontend developers and designers?
Before answering that question, let’s take a quick refresher on Bootstrap 5.
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.
In simple words, the framework helps create responsive websites and applications, and Bootstrap 5 takes it up a notch by:
- 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.
In this article, we’re not looking at the most evident features that Bootstrap 5 offers but rather the hidden, lesser-known capabilities that most developers may not be aware of.
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.
The latest accessibility standards, as set out by the World Wide Web Consortium (W3C), require a minimum contrast ratio of 4.5:1 for any text that comes over a background on a website.
To meet these accessibility standards, you would need to set the foreground colors based on the background. Without Bootstrap 5, developers would have to monitor and determine the best contrast ratio manually using the color contrast function. That changed with Bootstrap 5 because developers now have the capability to automatically set the foreground color (dark or light) based on the W3 contrast ratio.
This is quite the handy feature for developers as it not only automates their manual effort but also frees them from worrying about contrast errors while manually setting up the foreground colors.
Most importantly, at the end of the day, with this capability, developers and designers can ensure compliance with global accessibility standards.
Let’s watch this feature used in action. Consider that we are creating a card that can have a background color from any of these theme colors:
$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 ).
In order to set the foreground color (black or white) as per the contrast ratio (set using the min-contrast ratio variable), we’ll use the following function (from function.scss).
$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;Note: This function is present in the function.scss file and is derived from the W3C community of formulas.
For our card styling, we’ll use this function to set the foreground color simply by using the background color value in the argument:
@each $color, $value in $theme-colors {
.card.bg-#{$color} {
$card-background-color: $value;
color: color-contrast($card-background-color,$body-color);
}
}
As a result of this, what we get in the compiled output is the class generated for the card background (for example, .bg-primary), which will, in turn, decide which foreground color (dark or light) should be automatically set to this card (based on the contrast ratio).
This feature offers a major utility to developers, as it removes the risk of contrast errors while setting up the foreground colors.
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.
Previously, with large sets of values, creating these maps would be a manual, time-consuming process prone to human errors. By automating this process using the new Bootstrap 5 utilities of SCSS for loop and map-merge methods, developers can save a lot of time and manual effort.
To understand this Bootstrap 5 utility better, let’s take this example where we want to extend the values in an existing spacers map and add up to 30 more values. Your final map should look like this:
$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
);
Each value is 0.125 units more than the previous one.
From here, if we create such a map manually, it will require a lot of time and human effort. With Bootstrap 5, however, we can automate it using a loop:
$spacers: ();
@for $i from 0 through 30 {
$spacers: map-merge($spacers , ($i: '$spacer' + '*' + #{$i*0.125}));
}
@debug $spacers;When you run @debug $spacers, it will show you the values in the $spacers variable, as seen above.
What has happened here is that we’ve created a complete map writing only a single line of code no matter how many entries there were.
Using the same technique, we can also simplify the process of creating maps for other property variables.
Consider this example where we want to produce $position-values. This is how we want our required output to be:
$position-values: (
0: 0,
25: 25%,
50: 50%,
75: 75%,
100: 100%
);
We can produce this map with a single line of code using the for loop and map-merge method while adding as many entries as we want:
$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.
In this case, we’ve slightly modified the logic and adjusted the $i value according to the requirement before using it in the map-merge function.
Note: You can always use the @debug function to see the content of variables during compilation.
The same method can also be used to create a border width map:
$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;The logic here is relatively simple, as all we needed was the addition of syntax “px” with the value.
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.
Bootstrap 5 uses a SASS-based utility API to generate these utility classes, with the output stored in the $utilities variable as a Map through which various utility classes can be used.
This contributes in a major way when code is being written for a website to be viewed on different devices. Taking the various mobile or desktop views into consideration, developers would often have to create specific classes for the respective device view.
With this feature of responsive utility classes in Bootstrap 5, developers now have the option to automatically generate classes that can be used on mobile or desktop or tablet, catering to both a “medium screen” and a “large screen”.
$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
)
)
Let’s consider that you want to use the width property from this $utilities map:
'width':
(
property: width,
class: w,
values: (
25: 25%,
33: 33.33%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
),
),
The class that is generated for html use is .w-25 or .w-33 giving the CSS value width:25% or width: 33%.
If, for example, we wish to use the width property for a certain breakpoint (tablet or desktop only), the required class should be .w-md-25 or .w-lg-33 working at tablet or desktop breakpoints only.
All you would need to do is set the optional responsive value to “true”, which is false by default, and we’ll get the required responsive classes:
'width':
(
responsive:true,
property: width,
class: w,
values: (
25: 25%,
33: 33.33%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
),
),
What’s essentially happening here is that the API in Bootstrap 5 is doing all the work that previously, developers would have had to do manually through functions in older bootstrap versions.
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.
This is possible with Bootstrap 5 because the utility API has a state option, which, when set, gives developers the option to produce pseudo classes, like “hover, focus”.
Let’s take an example of the navigation menu on a website. If you want to add the ability for an item in the navigation bar to change color when a user hovers on it, and then apply the same command on other items in the navigation bar as well, all you would need to do with Bootstrap 5 is to simply write “state: hover” in the “Opacity” property in $Utilities Map and mention the values once. This will then produce the hover classes, which can be used in the html of menu items, making the coding much cleaner as well as reusable.
$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.
From accessibility to automation, Bootstrap 5 utilities have undoubtedly reached a whole other level in terms of making the development process much smoother and more efficient, particularly for frontend developers and designers.
