Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Go to docs v.5
Bootstrap skins are basic color schemes which can be applied for the website providing a ready to use full-page web design.
MDB provides you with a few basic color skin schemes that you might consider applying on your website for a different effect.
To apply a skin you just need to add one of our skin classes to the
Skin affects the following elements:
controls of carousel-multi-item,
primary, secondary, default colors.
White skin MDB Pro component
Black skin MDB Pro component
Cyan skin MDB Pro component
MDB skin MDB Pro component
Deep purple skin MDB Pro component
Pink skin MDB Pro component
Indigo skin MDB Pro component
Light blue skin MDB Pro component
Grey skin MDB Pro component
It's possible to add a custom skin
From the newest version of MDB - 4.5.2 you have a possibility of adding custom skin. Below we explain in a few steps how to do this. Note: to create the custom skin, it's best to use the MDB Pro Gulp package.
Instruction for adding a custom skin:
In your package in the SCSS catalog, you can see
Go to this file and change name of theskin and the values of
$skins object to your custom colors and save the file. After that you will have recompiled
mdb.css file with your new skin.
HTML file, add to the
body tag the class for your custom skin, eg. the
Description of a skin variables
Below you can find a description of individual variables, i.e. information on which elements of the layout correspond to each of the variables contained in the skin object.
|#||Variable||This variable is used for:|