Bootstrap 5 variables (original) (raw)

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.
• Rows are grouped into sections of similar variables
  • For example, Navs([navset_card_tab()](../../reference/navset.html)), Navbars ([page_navbar()](../../reference/page%5Fnavbar.html)), andDropdowns (e.g.,[nav_menu()](../../reference/nav-items.html)).
• Towards the top of the table are more general theming options likewhite, gray-*, black,primary, border-radius, and so on, which end up impacting more specific theming variables likebtn-border-radius.
  • [bs_theme()](../../reference/bs%5Ftheme.html)’s bg and fgarguments provide a more convenient way to set the white,gray-*, and black variables, 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).