Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements.
Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.
{{ highlight (printf `body { --bs-body-font-family: var(--bs-font-monospace); --bs-body-line-height: 1.4; --bs-body-bg: var(--bs-gray-100); } .table { --bs-table-color: var(--bs-gray-600); --bs-table-bg: var(--bs-gray-100); --bs-table-border-color: transparent; }`) "scss" "" }}