Background
Background utilities are used to manipulate the appearance of the background of any element.
Background Color
Background color utilities follow the contextual classes defined in the color map and are named using the format
.bg-{color}
where
color
is any color defined in the color map. A transparent option is also available.
Background color utilities do not set the text color of an element, so in some cases you will need to use text utilities alongside a background color utility.
The demo below features elements with the various background color options that have been styled with padding and box shadow applied.
.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-white.bg-dark.bg-black.bg-transparent
Background Gradient
Background gradient utilities use the background image property to overlay a solid color with a semi-transparent gradient. Simply append any background utility with the
.bg-gradient
class to acheive the gradient effect.
.bg-primary.bg-gradient.bg-secondary.bg-gradient.bg-success.bg-gradient.bg-danger.bg-gradient.bg-warning.bg-gradient.bg-info.bg-gradient.bg-light.bg-gradient.bg-dark.bg-gradient
Background Pattern
Two options for stylish background patterns have been included with Material Admin Pro. The 'Doubs' and 'Waihou' patterns from Paaatterns have be written as utility classes to include these designs.
.bg-pattern-doubs.bg-pattern-waihou
Related Links
Material Admin Pro text utilities
Bootstrap's color utilities