Below is a search-able table of Bootstrap 5 Sass variables. If you aren’t sure what a Sass variable is or how to use them, see this Get Started article. A few things to keep in mind when using this table:
- Each row represents a different Sass variable, showing its name and
default value.
- For Sass variables whose value defaults to another Sass variable
(e.g.,
border-color), you may hover over the value to get the (default) CSS value that it represents.
- For Sass variables whose value defaults to another Sass variable
(e.g.,
- Rows are grouped into sections of similar variables
- For example, Navs
(
navset_card_tab()), Navbars (page_navbar()), and Dropdowns (e.g.,nav_menu()).
- For example, Navs
(
- Towards the top of the table are more general theming options like
white,gray-*,black,primary,border-radius, and so on, which end up impacting more specific theming variables likebtn-border-radius.-
bs_theme()’sbgandfgarguments provide a more convenient way to set thewhite,gray-*, andblackvariables, so there is no need to set these Sass variables directly (same goes forbase_font->$font-family-base,heading_font->$headings-font-family, andcode_font->$font-family-monospace).
-