Color Variants
Vue MDBootstrap provides color classes that follow commonly used colors and derived from Bootstrap CSS. 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 Variants
Background color variants
Background color can be applied to any html element by using the CSS classname bg-{color-name}.
Border color variants
Border color can be applied to any html element by using the CSS classname border-{color-name}.
Text color variants
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.
Impedit architecto, totam hic sunt eum odio, deleniti.
MDBootstrap Colors
TIP
These color variants except for white and black color variants can be applied on some UI components via its property, such as color without bg- prefix. They also can be applied to html element, see: applying background, border, and text color variants above.
IMPORTANT
Starting from version 2.1.0, Vue MDBootstrap only provides minimal color variants in its main bundle (dist/bundle.css and dist/bundle.min.css) to reduce the file size. Other color variants are distributed in dist/bundle-color.css and dist/bundle-color.min.css.
Color variants that includes in the main bundle are: default, primary, secondary, info, success, warning, danger, grey, light-grey, light, dark, black, and white.
You can get the distribution with the following code:
// file: main.ts or main.js
// Import components css stylesheet with minimum color variants
import 'vue-mdbootstrap/styles';
// Optional, import other color variants
import 'vue-mdbootstrap/color-styles';Material Colors
TIP
These color variants can be applied on some UI components via its property, such as color without bg- prefix. They also can be applied to html element, see: applying background, border, and text color variants above.
INFO
Starting from version 2.1.0 these color variants are no longer included in the main bundle, but are distributed in dist/bundle-color.css and dist/bundle-color.min.css.
Grey Colors
TIP
These grey color variants can only be applied to html element, see: applying background, border, and text color variants above. If wanted to apply to an UI component, use its CSS classname on component's class property.
Full Colors
TIP
These color variants can only be applied as the background color of an html element, see: applying background color variants above. If wanted to apply to an UI component, use its CSS classname on component's class property.
INFO
Starting from version 2.1.0 these color variants are no longer included in the main bundle, but are distributed in dist/bundle-color.css and dist/bundle-color.min.css.
RGBA color variants
The base color of the above color variants can also be used to produce an RGBA background color.
TIP
These RGBA color variants can only be applied as the background color of an html element, see: applying background color variants above. If wanted to apply to an UI component, use its CSS classname on component's class property.
INFO
Starting from version 2.1.0 these color variants are no longer included in the main bundle, but are distributed in dist/bundle-color.css and dist/bundle-color.min.css.