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...