Colors
Vue MDBootstrap provides color classes that follow commonly used colors. Each color might exposed various tones varying from bright to dark. This will aid you in creating an inviting and color-consistent design. When using Vue MDBootstrap components, these variants refers to their color-name, rather than by the underlying CSS classname.
Applying Color
Background color
Background color can be applied to any html element by using the CSS classname bg-{color-name}.
Border color
Border color can be applied to any html element by using the CSS classname border-{color-name}.
Text color
Text color can be applied to any html element by using the CSS classname text-{color-name}.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit architecto, totam hic sunt eum odio, deleniti.
Similique ex, expedita minus assumenda a magni beatae dolorum itaque.
Contextual Colors
INFO
Since v2.2.0, Vue MDBootstrap doesn't provides color variants in its core bundle (dist/bundle-core.css and dist/bundle-core.min.css) to reduce the file size. The component color variants are distributed in dist/theme-light.css and dist/theme-dark.css. This will give developers the freedom to produce their own theme colors.
Use the following code to get the distribution:
// Import components core css stylesheet
import 'vue-mdbootstrap/styles';
// Import theme color for light theme
import 'vue-mdbootstrap/theme-light';
// Import theme color for dark theme
import 'vue-mdbootstrap/theme-dark';Additional Colors
Since v2.2.0, these color variants are distributed in dist/decorator-colors.css and dist/decorator-colors.min.css.
Use the following code to get the distribution:
// Optional, import style color decorators
import 'vue-mdbootstrap/styles-color';Main Colors
Material Colors
Full Colors
TIP
These color variants can only be applied as the background color of an html element, see: applying background color above.
Accent Colors
TIP
These color variants can only be applied as the background color of an html element, see: applying background color above.
RGBA Colors
The Main colors can also be used to produce an RGBA background color.
TIP
These color variants can only be applied as the background color of an html element, see: applying background color above.