Background Colors

The use of a background color should be done sparingly as it can come into direct conflict with the visual importance of components and interactions.

Background colors can be applied with the CSS classes show here. They will also change the font-color of any text inside the container they are applied on. These can be added to components like panels or icons and include hover effects when used on links.

Filled surfaces

Where .bg-* applies a subtle tinted (50-level) background for low-emphasis callouts, .filled-* paints the solid brand color and forces a readable white foreground for nested text, headings, icons, and links. Use it on a banner or strip — or as a .panel-heading modifier — that needs to read as "primary".