Changing the global options
Bootstrap 5 comes with a set of variables to enable or disable different global options for styles and behavior. Most of these variables can be found grouped together in the _variables.scss file, on lines 337-352, except for the $spacer variable, which can be found on line 374.
Here’s an overview of the different available options. They are listed here in the same order as they appear in the _variables.scss file:
- Caret
- Rounded (border-radius)
- Shadows (box-shadow)
- Gradients
- Transitions
- Reduced motion
- Smooth scroll
- Grid classes
- Container classes
- CSS grid
- Button pointers
- Responsive Font Sizes (RFS)
- Validation icons
- Negative margins
- Deprecation messages
- Important utilities
- Spacer
We will now run through each of the options and see their variable name, their default value, where they are defined, what they look like or do, and how they can be changed. For each option, there...
