Create Responsive Websites Efficiently With Bootstrap 5

In its latest update, Bootstrap 5 added a Sass-based API that can generate utility classes from just a few lines of code.

In this chapter, you’ll discover how this works and how to implement it in your future projects.

Take a look at the Bootstrap 5 documentation, in the “Utilities” section, under “API.” You’ll find the following code:

$utilities: (
"opacity": (
  property: opacity,
  values: (
   0: 0,
   25: .25,
   50: .5,
   75: .75,
   100: 1,
  )
)
);

Which outputs the following:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

In the example above, you can see the Sass structure of the API.

Looking at this example, you might be wondering the point of it. There’s almost as much on one side as the other!

The purpose of this API becomes clear when you add certain options to the Sass code (part 1 of the example above).

Your options are in the table below provided by the Bootstrap documentation:

Here’s an example of a utility class generated by the Bootstrap 5 API with the option  responsive  equal to  true  :

$utilities: (
"opacity": (
 property: opacity,
 responsive: true,
 values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
 )
)
);

Which outputs the following:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}

In this example, you can clearly see how powerful the Bootstrap 5 API utility is, and the time it can save in developing.

It allows you to automatically generate 30 CSS classes linked to the “media queries” of each breakpoint in Bootstrap 5. This utility is an invaluable time-saver when you’re creating utility classes.

Implement the Utility API in Your Project

To use the API in our project, we’re going to create a new page under sass/_utilities_custom.scss  , which we’re going to import just after sass/_variables_overrides.scss and before bootstrap.scss in our style.scss file.

At the top of the page, start by declaring the variable $utilities empty by default.

To do this, simply write  $utilities: ()!default;.

Once the page is created, you’ll need to use the Sass map-merge function so you don’t override the classes that already exist in Bootstrap 5. Here’s how to do it:

$utilities: map-merge(
$utilities,
(
 "cursor": (
  property: cursor,
  class: cursor,
  responsive: true,
  values: auto pointer grab,
 )
)
);

You can see that the structure is essentially the same; the only difference is that everything’s happening in the map-merge function.

You’re telling your code to merge the content of the pre-existing $utilities  variable (the first argument of the map-merge function) with the rest of the code you’re adding (the second argument of the map-merge function). 

And of course, to generate the CSS, don’t forget to compile your Sass using this command (if it’s not already running):

$ sass --watch scss:css

Over to You!

Your mission for this chapter:

• Generate the opacity and text-opacity utility classes from 0 to 1 and from 0.1 to 0.1. This class should be responsive and use the structure of the following class: o-*  and  to-*.

• Generate the z-index utility classes from -10 to 100 and from 10 to 10. This class should be responsive and use the structure of the following class: z-*.

Once you’ve made these changes, watch the screencast below to compare your work with ours!

Let’s Recap!

• You can create your own utility classes using the Bootstrap Sass-based API.

• This API helps save a lot of time, as with just a few lines of code you can automatically generate CSS classes.

Course Summary

Well done! You’ve learned all the Bootstrap skills you need to pass this course with flying colors!

You now know how to:

• Assess the pros and cons of using Bootstrap for your projects.

• Create responsive grids in Bootstrap.

• Use Bootstrap components such as the navigation bar, carousels, cards, etc.

• Create forms using Bootstrap classes for input and management.

• Use utility classes to adapt the layout and appearance of your website.

• Create your own customized themes and features in Bootstrap. 

• Use the Bootstrap 5 Sass utility API to generate your own utility classes.

As soon as you've completed the last quiz, you'll be ready to take on a larger-scale project such as building the front end of a more complex website than the one we've created in this course. Or you might want to tackle new aspects of web development, such as learning how to protect your app from security threats, enhancing your JavaScript skills, or taking your skills to the back end.