Chapter 10: Using Bootstrap 5 with Advanced Sass and CSS Features
In this chapter, we will look at advanced Sass and CSS features related to Bootstrap 5. In the previous chapters, we customized the look and feel of the website, but this time we will primarily change the way we write our code without any effect on the look and feel. And in addition to that, we will look at various other features through some isolated examples.
We will first see how we can use various Bootstrap 5 Sass mixins to write our code in different ways, and after that, we will see some examples of the Bootstrap 5 Sass functions.
Then we will see how we can use the extend feature of Sass for semantic HTML and to create custom components.
After that, we will learn about the best – and recommended – approach to creating custom components using the Bootstrap 5 variables, mixins, and functions.
Towards the end of the chapter, we will see how we can take advantage of the CSS custom properties that come with Bootstrap 5 to create a dark color theme and customize a component and a helper.
Finally, we will look at Bootstrap’s side project, RFS, and learn how to use it for calculating automated responsive CSS values.
In this chapter, we’re going to cover the following main topics:
- Using Bootstrap 5 Sass mixins
- Using Bootstrap 5 Sass functions
- Extending Bootstrap 5 classes for semantic HTML
- Extending Bootstrap 5 classes to create custom components
- Creating a custom component using Bootstrap 5 variables, mixins, and functions
- Using Bootstrap 5 CSS custom properties
- Using the RFS Sass plugin
As mentioned previously, for some of these topics we will update parts of our code for the website, while for other topics we will only see isolated examples related to that topic.
Technical requirements
- To preview the examples, you will need a code editor and a browser. The source code for all code examples can be found here: https://github.com/PacktPublishing/The-Missing-Bootstrap-5-Guide
- To compile Sass to CSS, you will need one of the following:
- Node.js, if you prefer a command-line interface (CLI) using Terminal (Mac) or Command Prompt (Windows)
- Scout-App, if you prefer a graphical user interface (GUI)
- Visual Studio Code, if you prefer to use an extension from the Visual Studio Code Marketplace
All these approaches are explained in Chapter 2, Using and Compiling Sass.
Using Bootstrap 5 Sass mixins
Bootstrap 5 contains many Sass mixins. Some of them are used by other parts of Bootstrap 5, while a few of them are not. All of them can be used in your own Sass code as well. In this section, we will first get an overview of the various mixins contained in Bootstrap 5, what they are used for, and how they relate to other Bootstrap 5 code. Then we will see different examples of how to use some of these mixins.
Mixin overview
In the mixins folder, we have a total of 25 files, which are all Sass partials. Here’s an overview of the files with comments about which elements (components, helpers, or other) of Bootstrap 5 are using these mixins, if any:
bootstrap/scss/mixins
_alert.scss // Alerts
_backdrop.scss // Modal, Offcanvas
_border-radius.scss // Used by many
_box-shadow.scss // Used by many
_breakpoints.scss // Used by many
_buttons.scss // Buttons
_caret.scss // Dropdowns
_clearfix.scss // Carousel, Clearfix
_color-scheme.scss // Not used
_container.scss // Container
_deprecate.scss // Not used
_forms.scss // Validation
_gradients.scss // 1 used by many, 7 not being used
_grid.scss // Grid
_image.scss // Images
_list-group.scss // List group
_lists.scss // Typography, Pagination
_pagination.scss // Pagination
_reset-text.scss // Popovers, Tooltips
_resize.scss // Not used
_table-variants.scss // Tables
_text-truncate.scss // Text truncation
_transition.scss // Used by many
_utilities.scss // Utility API
_visually-hidden.scss // Visually hidden
We will now see how we can group some of these mixins in three different ways depending on their usage.
Mixins depending on global options
Some mixins depend on the global options that we learned about in Chapter 4, Bootstrap 5 Global Options and Colors. So, these mixins will only return code if the specific option is enabled:
_border-radius.scss: @mixin border-radius
_box-shadow.scss: @mixin box-shadow
_caret.scss: @mixin caret
_deprecate.scss: @mixin deprecate
_forms.scss: @mixin form-validation-state
_gradients.scss: @mixin gradient-bg
_transition.scss: @mixin transition
Mixins that are not used
Some mixins are actually not used by other Bootstrap 5 code. We will see what some of these mixins can be used for later in this section:
_color-scheme.scss: @mixin color-scheme
_gradients.scss: @mixin gradient-x, @mixin gradient-y, @mixin gradient-directional, @mixin gradient-x-three-colors, @mixin gradient-y-three-colors, and @mixin gradient-radial
_resize.scss: @mixin resizable
Mixins used for variants
Some mixins are used to create different variations of primarily Bootstrap 5 components. This could be variations for contextual color, size, and breakpoint-specific behavior:
_alert.scss: @mixin alert-variant
_buttons.scss: @mixin button-variant, @mixin button-outline-variant, and @mixin button-size
_list-group.scss: @mixin list-group-item-variant
_pagination.scss: @mixin pagination-size
_table-variants.scss: @mixin table-variant
Examples
We will now see a few examples of how we can use some of the mixins in our own code. We will not update our website with these mixins but instead, see some standalone examples.
Responsive grid system
In this example, we will create a responsive grid system, including a container, using various mixins.
For this example, we have the following semantic HTML using only default HTML elements and no classes:
part-3/chapter-10/examples/mixins/responsive-grid-system/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Container and Grid Mixins</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>Header</header>
<main>
<nav>Nav</nav>
<article>Article</article>
<aside>Aside</aside>
</main>
<footer>Footer</footer>
</body>
</html>
We will now first add a container to the <body> element. When using a mixin for this, it will create a fluid container, and this is what we will use in our example. It requires some more custom code to create the same behavior as the default .container class with different max-width instances across breakpoints.
After adding the container, we will create a simple responsive grid using the <main> element as the row and the <nav>, <article>, and <aside> elements as columns. We won’t add any mixins to the <header> and <footer>.
The necessary Sass code for this example is the following:
part-3/chapter-10/examples/mixins/responsive-grid-system/scss/style.scss
// Bootstrap 5
@import "../../../../../../bootstrap/scss/bootstrap.scss";
body {
@include make-container();
}
main {
@include make-row();
}
nav {
@include make-col-ready();
@include media-breakpoint-up(lg) {
@include make-col(3);
}
}
article {
@include make-col-ready();
@include media-breakpoint-up(lg) {
@include make-col(6);
}
}
aside {
@include make-col-ready();
@include media-breakpoint-up(lg) {
@include make-col(3);
}
}
When this example is viewed in a browser, we will see that the layout of the page is now using a container and a responsive grid system.
Media queries for breakpoints
In this example, we will take a closer look at mixins for media queries for breakpoints. In the _breakpoints.scss file, we will find four mixins and four functions, where three of the functions are primarily used by those mixins and one, breakpoint-infix(), is used by various components in other files. For now, we will focus on the mixins.
Here’s an overview of the various mixins for media queries for breakpoints together with a short description of what they do:
media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
- For viewport sizes with the minimum breakpoint width
- Breakpoint specified by the $name argument
- The content block passed to the mixin will be applied to the specified breakpoint width and wider
- No media query for the smallest breakpoint
media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
- For viewport sizes with the maximum breakpoint width
- Breakpoint specified by the $name argument
- The content block passed to the mixin will be applied to the specified breakpoint width and narrower
media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
- For viewport sizes that span multiple breakpoint widths
- Breakpoints specified by the $lower and $upper arguments
- The content block passed to the mixin will be applied between the specified lower and upper breakpoint widths
media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
- For viewport sizes between the minimum and maximum breakpoint widths
- Breakpoint specified by the $name argument
- The content block passed to the mixin will be applied between the specified breakpoint’s minimum and maximum widths only
The $breakpoints argument is an optional argument with the default value $grid-breakpoints. This means that it will use the breakpoint widths defined in the $grid-breakpoints map.
To see these mixins in action, here’s an example that initially hides some elements and then displays them with the use of the different mixins. First, here’s the HTML for the example, where we use the classes .up, .down, .between, and .only, which will be used as selectors in our Sass:
part-3/chapter-10/examples/mixins/media-queries-for-breakpoints/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Media queries for breakpoints</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="p-4">
<div class="up">@include media-breakpoint-up(lg):
Visible on breakpoint sizes lg, xl and xxl</div>
<div class="down">@include media-breakpoint-down(md):
Visible on breakpoint sizes xs and sm</div>
<div class="between">@include media-breakpoint-
between(md, xl): Visible on breakpoint size md and
lg</div>
<div class="only">@include media-breakpoint-only(sm):
Visible on breakpoint size sm</div>
</body>
</html>
And here’s the Sass code, where we initially hide all elements and then display them using the various mixins:
part-3/chapter-10/examples/mixins/media-queries-for-breakpoints/scss/style.scss
// Bootstrap 5
@import "../../../../../../bootstrap/scss/bootstrap.scss";
.up {
display: none;
@include media-breakpoint-up(lg) {
display: block;
};
}
.down {
display: none;
@include media-breakpoint-down(md) {
display: block;
};
}
.between {
display: none;
@include media-breakpoint-between(md, xl) {
display: block;
};
}
.only {
display: none;
@include media-breakpoint-only(sm) {
display: block;
};
}
If you look at this example in a browser and resize the window, you will then see that the <div> elements are only visible at certain breakpoints.
Helpers
In this example, we will use two of the helper mixins. We will use the visually hidden mixin for a heading element and the text truncation mixin for a paragraph element. The HTML code for this example is as follows:
part-3/chapter-10/examples/mixins/helpers/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Helper Mixins</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Title for screen readers</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis convallis velit quis sapien sollicitudin
ultrices. Ut metus tortor, aliquet non rutrum ac,
dapibus vehicula augue. Etiam congue erat sem, vitae
gravida nunc pretium vitae. Fusce sed ex tellus.
Quisque auctor viverra feugiat. Nulla urna odio,
porta ut tristique ut, consequat non dolor. Etiam
varius maximus dolor, at consectetur lectus. Mauris
rutrum aliquet tellus, sed convallis diam.</p>
</body>
</html>
The Sass code used for this example is as follows:
part-3/chapter-10/examples/mixins/helpers/scss/style.scss
// Bootstrap 5
@import "../../../../../../bootstrap/scss/bootstrap.scss";
h1 {
@include visually-hidden();
}
p {
@include text-truncate();
}
When this example is viewed in a browser, the heading element will now be hidden from the screen, but visible to screen readers, while the paragraph will have its text on one line only with the text being truncated at the end followed by an ellipsis.
Dark color theme
In this example, we will see how we can define a dark color theme (also known as dark mode) using the color scheme mixin. The mixin is effective when the user is browsing with dark mode turned on in their browser or operating system. The color scheme mixin is currently not used by Bootstrap 5, but is still made available for us to use if we want to. In the next minor version of Bootstrap 5, v5.3.0, Bootstrap will have support for dark mode, and then the mixin will probably be used across various elements of the Sass code. Until then, we will create our own dark color theme for dark mode.
The source code for the mixin looks like this:
bootstrap/scss/mixins/_color-scheme.scss
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
As you can see, we pass the name of the color theme (which in this case is dark) to the mixin and then all the CSS rules inside of it. Those rules are then placed inside a media query, and the name is used as the value for the media feature prefers-color-scheme: #{$name}.
We will now use the mixin to create a dark color theme for our website. Inside of the mixin, we will add various CSS rules to target the elements where we want the color to change. Basically, we want the light colors to be dark and the dark colors to be light. Our code looks like this:
part-3/chapter-10/website/scss/_custom-styles.scss line 22-51
// Dark color theme
@include color-scheme(dark) {
// Body color
body {
background-color: $dark;
color: $light;
}
// Color utilities
.bg-light {
background-color: $dark !important;
}
.bg-dark {
background-color: $gray-700 !important;
}
// Components
.accordion-button,
.accordion-item,
.card,
.list-group-item {
background-color: $dark;
}
.accordion-button,
.breadcrumb-item.active,
.figure-caption,
.list-group-item,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
color: $light;
}
}
As you can see in the preceding code, we are first defining some base colors for the <body> element. Then we’re overwriting the background color utilities for light and dark colors using the !important rule since utility classes by default have the !important rule. Finally, we’re overwriting those components that have a light background color or dark text color.
The dark color theme can be seen in all detail when viewing our updated website (the website folder in the code for this chapter) in a browser, and here’s a screenshot of the Home page:
Figure 10.1 – Home page of the website with the dark color theme
You might want to experiment with other dark and light colors for the dark color theme, but this is the method to use.
Gradients
In this example, we will see how we can use various gradient mixins. Depending on the specific gradient mixin, various arguments can be specified, including color, degree, angle, and stop. In our example, we will just use the default mixin arguments along with some color utilities to better see these gradients.
In the HTML for this example, we have a number of <div> elements with some sizing and color utilities added. Notice that we have added a background color to the first and last example since those gradients are white by default. We also add the name of the mixin as a class and as the text of the <div> element, and that class will be used in our Sass code. First, here’s the HTML code:
part-3/chapter-10/examples/mixins/gradients/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Gradient Mixins</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="p-5 text-light bg-dark gradient-
bg">gradient-bg</div>
<div class="p-5 text-light gradient-x">gradient-x</div>
<div class="p-5 text-light gradient-y">gradient-y</div>
<div class="p-5 text-light gradient-
directional">gradient-directional</div>
<div class="p-5 text-light gradient-x-three-
colors">gradient-x-three-colors</div>
<div class="p-5 text-light gradient-y-three-
colors">gradient-y-three-colors</div>
<div class="p-5 text-light gradient-radial">gradient-
radial</div>
<div class="p-5 text-light bg-dark gradient-
striped">gradient-striped</div>
</body>
</html>
In our Sass code, we will first set the global option $enable-gradients to true, which is required to be able to use the gradient-bg mixin. Instead, it’s also possible to use the .bg-gradient class on an element without the need to enable the global option for gradients. But since this section is about using mixins, we will use the mixin version of this gradient.
After enabling the global option for gradients, we will use the before-mentioned classes as CSS selectors in our Sass code and include the various gradient mixins:
part-3/chapter-10/examples/mixins/gradients/scss/style.scss
// Bootstrap 5
$enable-gradients: true;
@import "../../../../../../bootstrap/scss/bootstrap.scss";
.gradient-bg {
@include gradient-bg();
}
.gradient-x {
@include gradient-x();
}
.gradient-y {
@include gradient-y();
}
.gradient-directional {
@include gradient-directional();
}
.gradient-x-three-colors {
@include gradient-x-three-colors();
}
.gradient-y-three-colors {
@include gradient-y-three-colors();
}
.gradient-radial {
@include gradient-radial();
}
.gradient-striped {
@include gradient-striped();
}
The various gradients look like this:
Figure 10.2 – Examples of all the gradient mixins
Using Bootstrap 5 Sass functions
Bootstrap 5 contains various Sass functions, and most of them are placed in the _functions.scss file. Some of these functions are used to evaluate the source code or manipulate Sass maps, but in this section, we will focus on the more useful color functions. There are a number of different color functions in Bootstrap 5, and we will now see examples of how we can use some of those in our own Sass code. We won’t use any of these functions for our website but instead, look at some isolated examples.
Tint color
The tint-color() function increases the lightness of a color by mixing it with white using the color mix function of Sass. You specify the $color and how much you want it to lighten, defined as the $weight.
The code for the function looks like this:
bootstrap/scss/_functions.scss line 205-208
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
Here’s an example of how to tint the $primary color by 25%:
part-3/chapter-10/examples/functions/scss/style.scss line 4-6
.bg-primary-tinted {
background-color: tint-color($primary, 25%);
}
The resulting CSS will be as follows:
part-3/chapter-10/examples/functions/css/style.css
.bg-primary-tinted {
background-color: #4a92fe;
}
Here, you can see what this looks like in the browser, shown together with the $primary color:
Figure 10.3 – Example of the tint-color function used with the primary color
Shade color
The shade-color() function increases the darkness of a color by mixing it with black using the color mix function of Sass. You specify the $color and how much you want it to darken, defined as the $weight.
The code for the function looks like this:
bootstrap/scss/_functions.scss line 210-213
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
Here’s an example of how to shade the $primary color by 25%:
part-3/chapter-10/examples/functions/scss/style.scss line 7-9
.bg-primary-shaded {
background-color: shade-color($primary, 25%);
}
The resulting CSS will be as follows:
part-3/chapter-10/examples/functions/css/style.css
.bg-primary-shaded {
background-color: #0a53be;
}
Here, you can see what this looks like in the browser, shown together with the $primary color:
Figure 10.4 – Example of the shade-color function used with the primary color
Shift color
The shift-color() function is a combination of the tint and shade color functions. If the $weight is positive, the $color will be shaded, else it will be tinted.
The code for the function looks like this:
bootstrap/scss/_functions.scss line 215-218
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight),
tint-color($color, -$weight));
}
Here’s an example of how to shift the $primary color by 25% and -25% respectively:
part-3/chapter-10/examples/functions/scss/style.scss line 10-15
.bg-primary-shifted-positive {
background-color: shift-color($primary, 25%);
}
.bg-primary-shifted-negative {
background-color: shift-color($primary, -25%);
}
The resulting CSS will be as follows:
part-3/chapter-10/examples/functions/css/style.css
.bg-primary-shifted-positive {
background-color: #0a53be;
}
.bg-primary-shifted-negative {
background-color: #4a92fe;
}
Here, you can see what this looks like in the browser, shown together with the $primary color:
Figure 10.5 – Example of the shift-color function used with the primary color
Color contrast
The color-contrast() function returns a contrast color (by default, either the $black or $white color) based on a specified base color with regards to accessibility standards. This is useful when looping through a map of colors, where you want to assure that, for example, the text color has the right color contrast ratio in relation to the background color specified in the map. We now want to see how we can do just that: generate a contrast color for each color in the $theme-colors map. Here’s the Sass code we will use to generate classes using the names of the colors in the map prefixed with .contrast-color-:
part-3/chapter-10/examples/functions/scss/style.scss line 17-21
@each $color, $value in $theme-colors {
.contrast-color-#{$color} {
color: color-contrast($value);
}
}
This will then generate the following CSS:
part-3/chapter-10/examples/functions/css/style.css
.contrast-color-primary { color: #fff; }
.contrast-color-secondary { color: #fff; }
.contrast-color-success { color: #fff; }
.contrast-color-info { color: #000; }
.contrast-color-warning { color: #000; }
.contrast-color-danger { color: #fff; }
.contrast-color-light { color: #000; }
.contrast-color-dark { color: #fff; }
In the CSS, we can see that either the contrast color #fff (white) or #000 (black) has been selected for each color in the $theme-colors map when using the color-contrast() function to ensure a high-enough color contrast ratio.
Here, you can see what this looks like in the browser:
Figure 10.6 – Example of the color-contrast function used with the theme colors
We have now seen how to use some of Bootstrap 5’s color functions with Sass. Next up, we will take a look at how to extend Bootstrap 5 classes for semantic HTML.
Extending Bootstrap 5 classes for semantic HTML
When using Bootstrap 5, you can end up adding a lot of classes to your markup, which will make it hard to swap out the Bootstrap 5 styles with your own set of styles, should you wish to do that sometime in the future. Instead, you can choose to only use semantic HTML elements, while still using the Bootstrap 5 styling. Your HTML can have no classes at all or only the classes you choose (and the naming of these classes as well). So, the structure of the HTML and the (optional) classes can be anything you want.
To understand why this might be desirable, we will consider the Bootstrap 5 CSS rulesets as two different things:
- A set of styling rules (the CSS declaration blocks)
- A vocabulary for these styling rules (the selectors)
We want the benefits of the styling rules, but we don’t want to rely on its vocabulary, which is the specific Bootstrap 5 classes. We can achieve this by using semantic HTML on our page and extending the Bootstrap 5 classes with Sass instead of using them directly in the markup.
It’s a big task to apply this method to all the HTML in our website, so instead, we will simply see an example of how this works.
Consider this simple layout created the normal way using Bootstrap 5 classes:
part-3/chapter-10/examples/semantic-extend/default/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Semantic Extending</title>
<link rel="stylesheet" href="../../../../../
bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="display-1 text-center">Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis convallis velit
quis sapien sollicitudin ultrices.</p>
<div class="row">
<nav class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item list-group-
item-action">List group item one</a>
<a href="#" class="list-group-item list-group-
item-action">List group item two</a>
<a href="#" class="list-group-item list-group-
item-action">List group item three</a>
</div>
</nav>
<article class="col-lg-6">
<h2 class="display-6">Article Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis convallis velit quis
sapien sollicitudin ultrices. Ut metus tortor,
aliquet non rutrum ac, dapibus vehicula augue.
Etiam congue erat sem, vitae gravida nunc
pretium vitae. Fusce sed ex tellus. Quisque
auctor viverra feugiat. Nulla urna odio,
porta ut tristique ut, consequat non dolor.
Etiam varius maximus dolor, at consectetur
lectus. Mauris rutrum aliquet tellus, sed
convallis diam.</p>
</article>
<aside class="col-lg-3">
<div class="card">
<div class="card-body">
<a href="#" class="btn btn-primary">Contact
support</a>
</div>
</div>
</aside>
</div>
<footer>
<ul class="list-inline text-center">
<li class="list-inline-item"><a href="#">Footer
link one</a></li>
<li class="list-inline-item"><a href="#">Footer
link two</a></li>
<li class="list-inline-item"><a href="#">Footer
link three</a></li>
</ul>
</footer>
</div>
</body>
</html>
Now, we will remove all the Bootstrap 5 classes and only rely on semantic HTML elements:
part-3/chapter-10/examples/semantic-extend/extended-classes/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Semantic Extending</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis convallis velit quis sapien
sollicitudin ultrices.</p>
</header>
<main>
<nav>
<div>
<a href="#">List group item one</a>
<a href="#">List group item two</a>
<a href="#">List group item three</a>
</div>
</nav>
<article>
<h2>Article Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis convallis velit quis
sapien sollicitudin ultrices. Ut metus tortor,
aliquet non rutrum ac, dapibus vehicula augue.
Etiam congue erat sem, vitae gravida nunc
pretium vitae. Fusce sed ex tellus. Quisque
auctor viverra feugiat. Nulla urna odio, porta
ut tristique ut, consequat non dolor. Etiam
varius maximus dolor, at consectetur lectus.
Mauris rutrum aliquet tellus, sed convallis
diam.</p>
</article>
<aside>
<div>
<div>
<a href="#">Contact support</a>
</div>
</div>
</aside>
</main>
<footer>
<ul>
<li><a href="#">Footer link one</a></li>
<li><a href="#">Footer link two</a></li>
<li><a href="#">Footer link three</a></li>
</ul>
</footer>
</body>
</html>
Now there’s no evidence of Bootstrap 5 in our markup. To still benefit from the Bootstrap 5 styling, we need to extend the Bootstrap 5 classes using the @extend rule of Sass, like so:
part-3/chapter-10/examples/semantic-extend/extended-classes/scss/style.scss
// Bootstrap 5
@import "../../../../../../bootstrap/scss/bootstrap.scss";
body {
@extend .container;
}
header {
h1 {
@extend .display-1, .text-center;
}
p {
@extend .lead;
}
}
main {
@extend .row;
> nav {
@extend .col-lg-3;
> div {
@extend .list-group;
a {
@extend .list-group-item, .list-group-item-action;
}
}
}
> article {
@extend .col-lg-6;
h2 {
@extend .display-6;
}
}
> aside {
@extend .col-lg-3;
> div {
@extend .card;
> div {
@extend .card-body;
> a {
@extend .btn, .btn-primary;
}
}
}
}
}
footer {
> ul {
@extend .list-inline, .text-center;
> li {
@extend .list-inline-item;
}
}
}
We will now see the same visual result in the browser. The markup has been changed, but the visual style remains the same.
Semantic HTML with Bootstrap 5
It should be noted that it is completely possible to use semantic HTML elements together with the Bootstrap 5 classes since these classes can be used for any HTML element you want. The method described in this section is intended for use with semantic HTML without any classes or only with the classes (and the naming of these classes) we want.
Extending Bootstrap 5 classes to create custom components
In this section, we will see how we can extend existing Bootstrap 5 classes using the @extend rule of Sass. With this method, it will be possible to create the same UI elements, but with less HTML code, which is better for readability.
We will use this method for three of our UI elements in our website: the Page title global module, the blockquote in the Reviews section of the Product page, and the bottom border of the Summary section of the Cart page.
The Page title global module
The Page title global module is used on all pages except for the Home page and Product page. The visual style of this module looks like the jumbotron component found in previous versions of Bootstrap. We will now extend the Bootstrap 5 classes being used by the Page title global module to make the markup simpler. We will use the name jumbotron for this custom component.
In our HTML for the new custom component, we have to keep a parent element (.jumbotron), so that we can give the component a background color spanning the full width, and then restrain the actual content within a child element (.jumbotron-heading) by extending the .container class there:
part-3/chapter-10/website/shop.html line 67-69
// Original code
<div class="bg-light py-5 mb-5">
<div class="container">
<h1 class="display-1 text-center mb-0">Shop</h1>
</div>
</div>
// Updated code
<div class="jumbotron">
<h1 class="jumbotron-heading">Shop</h1>
</div>
In our style sheet, we can now extend all the classes like so:
part-3/chapter-10/website/scss/_custom-styles.scss line 53-59
// Create a custom jumbotron component that extends various
// Bootstrap 5 classes
.jumbotron {
@extend .bg-light, .py-5, .mb-5;
}
.jumbotron-heading {
@extend .container, .display-1, .text-center, .mb-0;
}
Blockquote in the Reviews section
In the Reviews section of the Product page, we have three reviews with a blockquote being used in each of them. This blockquote contains a quote icon that’s using a lot of utility classes to give it a custom look. We will now extend the Bootstrap 5 classes being used by and within the blockquote to make the markup simpler. We will use the name quote for this custom component.
In our HTML for the new custom component, we could have just extended the classes being used by the icon, and then kept the parent .blockquote class. But we want to make this an alternative component to the default blockquote element, and that’s why we will also extend the .blockquote class on the parent, so that we can give it a new name:
part-3/chapter-10/website/product.html line 307-310
// Original code
<blockquote class="blockquote">
<div class="text-secondary float-start fs-1 lh-1 mt-1
me-2 border-top border-start border-2 border-secondary
p-1"><i class="bi-quote"></i></div>
<p>[Text]</p>
</blockquote>
// Updated code
<blockquote class="quote">
<div class="quote-icon"><i class="bi-quote"></i></div>
<p>[Text]</p>
</blockquote>
In our style sheet, we can now extend all the classes like so:
part-3/chapter-10/website/scss/_custom-styles.scss line 61-67
// Create a custom quote component that extends various Bootstrap 5 classes
.quote {
@extend .blockquote;
}
.quote-icon {
@extend .text-secondary, .float-start, .fs-1, .lh-1,
.mt-1, .me-2, .border-top, .border-start, .border-2,
.border-secondary, .p-1;
}
Border in the Summary section
In the Summary section in the Shipping Details tab pane and Payment Options tab pane of the Cart page, there is a bottom border created with extensive use of responsive border and spacing utilities to achieve the desired design (currently a total of 30 utility classes are used). We will now extend the Bootstrap 5 utility classes being used to create the bottom border to make the markup simpler. We will use the name summary-border for this custom component.
The updated HTML code looks like this:
part-3/chapter-10/website/cart.html line 271
// Original code
<div class="border-bottom border-2 border-light mb-4 pb-4 border-bottom-md-0 border-end-md border-md-2 pb-md-0 mb-md-0 border-bottom-xl border-end-xl-0 border-xl-2 pb-xl-4 mb-xl-4">
</blockquote>
// Updated code
<div class="summary-border">[Summary section code]</div>
In our style sheet, we can now extend all the classes like so:
part-3/chapter-10/website/scss/_custom-styles.scss line 69-72
// Create a custom summary border component that extends border and spacing utilities
.summary-border {
@extend .border-bottom, .border-2, .border-light, .mb-4,
.pb-4, .border-bottom-md-0, .border-end-md, .border-md-
2, .pb-md-0, .mb-md-0, .border-bottom-xl, .border-end-
xl-0, .border-xl-2, .pb-xl-4, .mb-xl-4, .border-bottom,
.border-2, .border-light, .mb-4, .pb-4, .border-
bottom-md-0, .border-end-md, .border-md-2, .pb-md-0,
.mb-md-0, .border-bottom-xl, .border-end-xl-0, .border-
xl-2, .pb-xl-4, .mb-xl-4;
}
Important rote about the @extend rule
The @extend rule of Sass is becoming less popular and many recommend not using it. The reason is that it will alter the source order and create unwanted groupings of the CSS. Even though it might reduce the CSS file size, it might end up being bad for network performance. This discussion will quickly become technical and lengthy, so if you want to learn more, I encourage you to google “Sass extend performance” or similar. The @placeholder and @mixin rules of Sass might be better to achieve the same things, but when you don’t want to alter the source code (which we don’t want when using Bootstrap 5, as explained earlier in this book), then the method described here is viable.
We have now learned how to extend Bootstrap 5 classes to create custom components. Next up, we will see how we can create a custom component in another way using Bootstrap 5 variables, mixins, and functions.
Creating a custom component using Bootstrap 5 variables, mixins, and functions
In the previous section, we saw how we could extend existing Bootstrap 5 classes using the @extend rule of Sass to create a custom component. In this section, we will see how we can create a custom component with Sass using the approach recommended by the team behind Bootstrap. This approach first of all entails reusing as many Bootstrap variables, mixins, and functions as possible, so that the custom component will be affected by any customization of the global options and Bootstrap variables. Secondly, the component will be based on a base class that groups as many shared properties as possible, and then a range of modifier classes that group individual styles together.
The custom component that we’re going to create is a timeline component, and it looks like this:
Figure 10.7 – The custom timeline component
In the screenshot, we see the base class being used, but we will also create modifier classes for contextual color variants and responsive horizontal variants. For the timeline component, we’re using an unordered list with a number of list items inside. We’re using the class .timeline for the parent element and the class .timeline-item for the list items inside. Inside each list item, we then have an element with the class .timeline-time for the time of each event and a paragraph with the class .timeline-text for the description of each event.
The HTML for this custom component looks like this:
part-3/chapter-10/examples/custom-component/index.html
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-time">2022</div>
<p class="timeline-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis convallis velit
quis sapien sollicitudin ultrices.</p>
</li>
[More timeline items here]
</ul>
In our Sass code, we first import the Bootstrap 5 files, and then we define the CSS rules using as many Bootstrap 5 variables and mixins as possible, so our component will be affected by any customization we might use elsewhere in our Sass code. We’re using Bootstrap 5 variables for spacing, borders, colors, and font weight, and we’re using mixins to create an unstyled list and to add a shadow if the global option for shadows ($enable-shadows) is enabled.
The Sass code for our custom component is as follows:
part-3/chapter-10/examples/custom-component/scss/style.scss line 1-40
// Bootstrap 5
@import "../../../../../bootstrap/scss/bootstrap.scss";
.timeline {
@include list-unstyled;
margin: $spacer 0;
}
.timeline-item {
padding-bottom: $spacer;
border-left: $border-width solid $border-color;
position: relative;
padding-left: $spacer;
margin-left: .625rem;
&:last-child{
border: 0;
padding-bottom: 0;
}
&::before {
content: '';
width: 1.2rem;
height: 1.2rem;
background: $white;
border: $border-width solid $border-color;
@include box-shadow($box-shadow-inset);
border-radius: 50%;
position: absolute;
left: -.6rem;
top: 0;
}
}
.timeline-time {
font-weight: $font-weight-bold;
top: -0.1875rem;
position: relative;
}
.timeline-text {
margin-bottom: 0;
}
Creating contextual color variants
Now, we will create contextual color variants for our component. We want the component to have a range of modifier classes that can be added to individual timeline items, which will then set the color of the following three items:
- The text color of the .timeline-time element
- The border color of the .timeline-item element
- The border color of the ::before pseudo-element of the .timeline-item element
To generate the various modifier classes for the contextual color variants, we will use a Sass loop to loop through the $theme-colors map. In that loop, the key is assigned to the $state variable and the value is assigned to the $value variable. The $state variable is then used to generate the various classes, while the $value variable is used to add the color to the different elements.
The Sass code looks like this:
part-3/chapter-10/examples/custom-component/scss/style.scss line 42-54
@each $state, $value in $theme-colors {
.timeline-item-#{$state} {
border-color: $value;
&::before {
border-color: $value;
}
.timeline-time {
color: $value;
}
}
}
Using this method, we will generate modifier classes for each theme color, such as, for example, the .timeline-item-primary modifier class for the $primary color. These modifier classes will then be added to our HTML in the following way:
part-3/chapter-10/examples/custom-component/index.html
<ul class="timeline">
<li class="timeline-item timeline-item-primary
">
<div class="timeline-time">2022</div>
<p class="timeline-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis convallis velit
quis sapien sollicitudin ultrices.</p>
</li>
[More timeline items here]
</ul>
Here’s a screenshot of what the different contextual color variants look like:
Figure 10.8 – The custom timeline component with the contextual color variants
Creating responsive horizontal variants
Now, we will create responsive horizontal variants for our component. We want the component to have a range of modifier classes that can be added to the parent element, which will then define at what breakpoint the component will be displayed in the horizontal version.
Here’s a screenshot of what the horizontal version looks like:
Figure 10.9 – The custom timeline component in the horizontal version
To generate the various modifier classes for the responsive horizontal variants, we will use a Sass loop to loop through the $grid-breakpoints map. In that loop, the key is assigned to the $breakpoint variable and is then first used as an argument for the media-breakpoint-up() mixin. Inside the media query, the $breakpoint variable is used as an argument for the breakpoint-infix() function to generate a value for the $infix variable, which is then used to generate the various class names with the correct breakpoint infix (-sm, -md, -lg, -xl, or -xxl).
The Sass code looks like this:
part-3/chapter-10/examples/custom-component/scss/style.scss line 56-75
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-
breakpoints);
.timeline-horizontal#{$infix} {
display: flex;
padding-top: 0.6rem;
overflow-y: scroll;
.timeline-item {
border-left: none;
border-top: $border-width solid $border-color;
&::before {
top: -0.6rem;
}
}
}
}
}
Using this method, we will generate modifier classes for each breakpoint, such as, for example, the .timeline-horizontal-sm modifier class for the sm breakpoint. Notice that we will also generate the modifier class .timeline-horizontal, which will display the component in the horizontal version for all screen sizes.
The modifier classes can be added to our HTML in the following way:
part-3/chapter-10/examples/custom-component/index.html
<ul class="timeline timeline-horizontal-sm">
<li class="timeline-item">
<div class="timeline-time">2022</div>
<p class="timeline-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis convallis velit
quis sapien sollicitudin ultrices.</p>
</li>
[More timeline items here]
</ul>
When viewing this example in a browser, you can see how the different timeline components turn into horizontal versions at various breakpoints.
In this section, we have seen how to create a custom component using the approach recommended by the team behind Bootstrap. We have created a timeline component, but the method can be used to create any kind of custom component that you want.
Using Bootstrap 5 CSS custom properties
Bootstrap 5 includes many CSS custom properties in its compiled CSS file (bootstrap/dist/css/bootstrap.css). This gives us global access to values for colors, typography, and borders, as well as local access to various values for most components and some utilities when the Bootstrap 5 CSS is loaded. With these CSS custom properties, we can do customization without having to recompile the Sass code using a CSS preprocessor.
CSS custom properties or CSS variables?
CSS custom properties are also often referred to as CSS variables. This is also the way the Bootstrap team refers to them in the official documentation, but in this chapter, I will refer to them as CSS custom properties, to better distinguish them from Sass variables.
Groups of CSS custom properties
In Bootstrap 5, there are three major groups of CSS custom properties:
- Root CSS custom properties
- Component CSS custom properties
- Utility CSS custom properties
Root CSS custom properties
The root CSS custom properties are added to the :root pseudo-class, which is equal to the <html> element in an HTML document. This placement gives us global access to them from all other HTML elements on our page. They are located before all other code in the compiled Bootstrap 5 CSS (bootstrap/dist/css/bootstrap.css).
The root custom properties are generated from the _root.scss file. The first part of the file generates CSS custom properties for various colors by using a Sass loop for the $colors, $grays, $theme-colors, and $theme-colors-rgb map as well as a few other CSS custom properties. The next part of the file generates CSS custom properties for various typography styles, such as the font stacks and the base styles for the <body> element, as well as a CSS custom property for the default $gradient. The last part of the file generates CSS custom properties for borders and the border radius. Most of the CSS custom properties for typography are used by the _reboot.scss file to style the <body> element, and the CSS custom properties for borders and the border radius are used for generating border and border radius utilities and within a few components. Finally, the CSS custom properties for colors are simply made globally available to use for customization.
Here’s an example of how to change the primary, secondary, and success color by overriding the following CSS custom properties:
:root {
--bs-primary: red;
--bs-secondary: green;
--bs-success: blue;
--bs-primary-rgb: #{to-rgb(red)};
--bs-secondary-rgb: #{to-rgb(green)};
--bs-success-rgb: #{to-rgb(blue)};
}
This should be placed somewhere after the compiled Bootstrap 5 code to work. The example has not been implemented on our website but is just shown here as an example of how to use the root CSS custom properties.
Component CSS custom properties
The component CSS custom properties are locally scoped to the individual components of Bootstrap 5. Since they are local, they can only be accessed by the element where they are defined and not globally like the root custom properties. All components, except the scrollspy and close button components, have CSS custom properties.
In a partial .scss file for a component, the technique of using Sass variables and CSS custom properties is as follows:
- CSS custom properties are added to the parent (or main) class of the component
- Sass variables from _variables.scss are assigned as values to the CSS custom properties
- CSS custom properties are used as values for the regular CSS properties
Here’s the source code of the badge component that shows this technique (comments have been removed):
bootstrap/scss/_badge.scss
.badge {
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-
size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
display: inline-block;
padding: var(--#{$prefix}badge-padding-y) var(
--#{$prefix}badge-padding-x);
@include font-size(var(--#{$prefix}badge-font-size));
font-weight: var(--#{$prefix}badge-font-weight);
line-height: 1;
color: var(--#{$prefix}badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--#{$prefix}badge-border-radius, 0);
@include gradient-bg();
&:empty {
display: none;
}
}
And here’s the compiled CSS for that component:
bootstrap/dist/css/bootstrap.css line 4809-4829
.badge {
--bs-badge-padding-x: 0.65em;
--bs-badge-padding-y: 0.35em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 700;
--bs-badge-color: #fff;
--bs-badge-border-radius: 0.375rem;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-
padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius, 0);
}
.badge:empty {
display: none;
}
We can see that the component has six different CSS custom properties, which are not used out of the box. Instead, they are available to us for customizing this component. We will make use of that by increasing the horizontal and vertical padding with the following lines of code:
part-3/chapter-10/website/scss/_custom-styles.scss line 74-77
.badge {
--bs-badge-padding-x: 1em;
--bs-badge-padding-y: 0.7em;
}
When we have compiled our CSS, we will now see these CSS custom property overrides taking effect with increased padding on the badge component.
Utility CSS custom properties
The utility CSS custom properties are defined for the background, color, and border utilities, and they are locally scoped like the component CSS custom properties. Using these CSS custom properties, we can, for example, control the alpha transparency value of rgba() colors.
If we take the background utility as an example, the .bg-primary utility has the following CSS styles:
bootstrap/dist/css/bootstrap.css line 8402-8405
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-
bg-opacity)) !important;
}
We can see that the utility has the --bs-bg-opacity: 1 CSS custom property, which is used by the background-color property to specify the a part of the rgba() color function. We can now add, for example, the class .bg-opacity-25 or .bg-opacity-50 to the same element to change the opacity from 1 to 0.25 or 0.5. If we want the opacity to be somewhere in between, we can overwrite the CSS custom property, for example, like so:
HTML
<div class="bg-primary" style="--bs-bg-opacity: 0.33">Primary background with an opacity of 0.33</div>
Limitations of CSS custom properties for customization
You can do powerful customization with CSS custom properties. However, you can’t just replace the usage of Sass variables in all situations. As an example of this, let’s consider the global styling for border radiuses. These are initially defined as six different Sass variables in the _variables.scss file:
bootstrap/scss/_variables.scss line 495-500
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-2xl: 2rem !default;
$border-radius-pill: 50rem !default;
These Sass variables are then used to generate the CSS custom properties for border radius in the _root.scss file like so:
bootstrap/scss/_root.scss
--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
--#{$prefix}border-radius-pill: #{$border-radius-pill};
If we now use the compiled Bootstrap 5 CSS and we want to change the border radius of buttons, we can target the .btn in our own CSS and override the CSS custom property for border radius like so:
.btn {
--bs-btn-border-radius: 0.75rem;
}
The limitation here is that we can’t define the $border-radius Sass variable, which is used across many components, using a CSS custom property. So, in our example, the border radius of button elements will change, but not the border radius of input elements, even though they use the same border radius value in the Sass code:
bootstrap/scss/_variables.scss line 774 and 835
$btn-border-radius: $border-radius !default;
$input-border-radius: $border-radius !default;
As we can see, this is a limitation. So, even though customization with CSS custom properties is powerful and we don’t need to use a CSS preprocessor, we can’t do the same kinds of customizations as we can using Sass. Nonetheless, we will now take a look at a few more examples of how we can use CSS custom properties for customization.
The dark color theme
We previously saw how to create styles for a dark color theme using the color-scheme mixin and color variables. It’s also possible to create the same dark color theme styles using a media query and CSS custom properties. The necessary CSS code for this is as follows:
part-3/chapter-10/website/css/darkmode.css
@media (prefers-color-scheme: dark) {
body {
background-color: var(--bs-dark);
color: var(--bs-light);
}
.bg-light, .jumbotron {
background-color: var(--bs-dark) !important;
}
.bg-dark {
background-color: var(--bs-gray-700) !important;
}
.accordion-button,
.accordion-item,
.card,
.list-group-item {
background-color: var(--bs-dark);
}
.accordion-button,
.breadcrumb-item.active,
.figure-caption,
.list-group-item,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
color: var(--bs-light);
}
}
To use it, you simply include the darkmode.css file in the <head> somewhere after the compiled Bootstrap 5 CSS file; for example, like this:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/darkmode.css">
<link rel="stylesheet" href="icons/bootstrap-icons.css">
Since we have already created the dark color theme for our website with Sass, we will keep that and not update our code to use the darkmode.css file, but it’s included in the css folder for you to use if you want to. If you choose to use it, remember to remove the styling for the dark color theme in the _custom-styles.scss file.
Breadcrumb
We previously changed the breadcrumb divider by overriding the $breadcrumb-divider variable in the _default-variable-overrides.scss file. We can use the --bs-breadcrumb-divider CSS custom property for this instead since the Sass variable is actually just a fallback to the CSS custom property.
To make this update to our website, we will first remove our Sass customization for the breadcrumb divider:
part-3/chapter-10/website/scss/_default-variable-overrides.scss
// Breadcrumb
$breadcrumb-divider: quote("–");
Instead, we will now use the CSS custom property by assigning a value to it in an inline style on the <nav> element wrapping the breadcrumb component on the Shop and Product pages, which are the only places we’re using that component:
part-3/chapter-10/website/shop.html line 216-222
<nav aria-label="Breadcrumb navigation" style="--bs-breadcrumb-divider: '–';">
<ol class="breadcrumb mb-2 mb-lg-0">
<li class="breadcrumb-item"><a href="#">Shop</a></li>
<li class="breadcrumb-item"><a
href="#">Category</a></li>
<li class="breadcrumb-item active" aria-
current="page">Subcategory</li>
</ol>
</nav>
We won’t see any visual change in the browser, which means that we have successfully updated our code.
Helper
We previously added a new ratio helper class with the aspect ratio 5x3 by creating a $custom-ratio map and merging it with the default $aspect-ratios map. This required several lines of code at the end of our _variable-value-using-variable.scss file. We can use the --bs-aspect-ratio CSS custom property for this instead since the Sass code for the ratio helper is already using the values in the $aspect-ratios map to set the value of that CSS custom property.
To make this update to our website, we will first remove our Sass customization for the ratio helper:
part-3/chapter-10/website/scss/_variable-value-using-variable.scss
// Ratio
// Create custom ratio map
$custom-ratio: (
"5x3": calc(3 / 5 * 100%)
);
// Merge "$aspect-ratios" and "$custom-ratio"
$aspect-ratios: map-merge($aspect-ratios, $custom-ratio);
Instead, we will now use the CSS custom property by assigning a value to it in an inline style on the ratio helper wrapping the <iframe> with the Google Maps map on the Contact page, which is the only place we’re using the ratio helper:
part-3/chapter-10/website/contact.html line 177-179
<div class="ratio ratio-5x3" style="--bs-aspect-ratio: 60%;">
<iframe src="https://www.google.com/maps/
embed?pb=!1m18!1m12!1m3!1d3022.6175453420647!2d-
73.98784413479707!3d40.748440379327945!2m3!1f0!2f
0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9aeb
1c6b5%3A0x35b1cfbc89a6097f!2sEmpire+State+Building
%2C+350+5th+Ave%2C+New+York%2C+NY+10118%2C+USA
!5e0!3m2!1sda!2sdk!4v1491841211721"
allowfullscreen></iframe>
</div>
To keep it short and simple, we’re using the value 60%, which is simply the result of calc(3 / 5 * 100%). The aspect ratio will now stay the same when we view the page with the updated code in the browser.
Prefix for CSS custom properties
By default, all Bootstrap 5 CSS custom properties are prefixed with bs- (the double hyphen -- in front of the prefix bs- is how you declare a CSS custom property, and this can’t be omitted). Should you wish to change this prefix, it can be done by overriding the $prefix variable defined on line 357 in the _variables.scss file. The default value for this variable is bs-.
Deprecated variable for the CSS custom property prefix
The variable to specify the CSS custom property prefix used to be $variable-prefix, but from version v5.2.0 of Bootstrap, this will be deprecated and replaced by the shorter $prefix. So, in this current version, v5.2.0, both variables are found in the code.
Using the RFS Sass plugin
RFS is officially described as a “unit resizing engine” that “automates responsive resizing.” In other words, RFS is a collection of Sass mixins and functions for calculating automated responsive CSS values based on the width of the viewport. Being an abbreviation for Responsive Font Sizes, it was originally developed for font resizing, but it’s now capable of resizing almost any value for any CSS property with units. RFS can be downloaded from its official website at GitHub at github.com/twbs/rfs/ or through NPM with the command npm install rfs. As you can see from the GitHub URL, the repository lives side by side with Bootstrap, since RFS is a side project from the team behind Bootstrap. In fact, RFS comes packaged with Bootstrap 5 as the file _rfs.scss in the vendor folder, and it’s used for resizing font sizes. This is most apparent in headings. RFS is enabled by default by the global option $enable-rfs and can therefore also be disabled by setting that variable to false, as we saw in Chapter 4, Bootstrap 5 Global Options and Colors.
The syntax for RFS is as follows:
@include rfs([max-value], [property])
[max-value] is the value you would like for the specified [property] on large screens. RFS will use this value when the width of the viewport is 1200px or larger (so from the xl breakpoint and up). Below that, the value will dynamically scale in relation to the width of the viewport, until it reaches the base value of 1.25rem, after which it will no longer scale. These two options can be customized using the $rfs-breakpoint and $rfs-base-value variables along with other options.
There are also the following shorthand mixins for font size, padding, and margin we can use, so we don’t need to specify the property explicitly:
bootstrap/scss/vendor/_rfs.scss
// Shorthand helper mixins
@mixin font-size($value) {
@include rfs($value);
}
@mixin padding($value) {
@include rfs($value, padding);
}
@mixin padding-top($value) {
@include rfs($value, padding-top);
}
@mixin padding-right($value) {
@include rfs($value, padding-right);
}
@mixin padding-bottom($value) {
@include rfs($value, padding-bottom);
}
@mixin padding-left($value) {
@include rfs($value, padding-left);
}
@mixin margin($value) {
@include rfs($value, margin);
}
@mixin margin-top($value) {
@include rfs($value, margin-top);
}
@mixin margin-right($value) {
@include rfs($value, margin-right);
}
@mixin margin-bottom($value) {
@include rfs($value, margin-bottom);
}
@mixin margin-left($value) {
@include rfs($value, margin-left);
}
Now, let’s see an example where we’re using RFS to set the padding of a box. In the HTML, we first have a box using RFS for padding and then another box using a spacing utility for padding:
part-3/chapter-10/examples/rfs/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>RFS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-3">
<p>Box with RFS used for padding</p>
<div class="box border mb-3">
<h1 class="m-0">Heading</h1>
</div>
<p>Box with spacing utility used for padding</p>
<div class="p-5 border">
<h1 class="m-0">Heading</h1>
</div>
</div>
</body>
</html>
Then, in our Sass, we first import Bootstrap 5 and then use the shorthand mixin for padding on our .box class like so:
part-3/chapter-10/examples/rfs/scss/style.scss
// Bootstrap 5
@import "../../../../../bootstrap/scss/bootstrap.scss";
.box {
@include padding(3rem);
}
We’re using the value 3rem, which is the same value that’s used by the .p-5 class on the first box. In that way, it’s easy to see what difference the RFS makes. Following are two screenshots showing the difference, and I also suggest that you view the example in a browser, where you can better see the automatic calculations done by RFS when resizing the width of the browser.
Figure 10.10 – Viewed on a small device (576px): calculated value is being used for padding
Figure 10.11 – Viewed on an extra large device (1200px): the max value is being used for padding
Summary
In this chapter, we have had a look at various advanced Sass and CSS features related to Bootstrap 5. We first saw how we could use various Bootstrap 5 mixins and functions and how to use the extend feature for various purposes. We then learned about the recommended approach to creating custom components using the Bootstrap 5 variables, mixins, and functions. After that, we saw how to use the Bootstrap 5 CSS custom properties to create a dark color theme and to customize a component and a helper. Finally, we learned how to use Bootstrap’s side project, RFS, to calculate automated responsive CSS values.
In the next chapter, we will take a closer look at the JavaScript features of Bootstrap 5.
