Bootstrap skins

Bootstrap skins are basic color schemes which can be applied for the website providing ready to use full-page web design.

MDB provides you with few basic color skins schemes 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 <body> element.

Skin affects the following elements: navbar, sideNav, footer, button, dropdown, pagination, input, controls of carousel-multi-item, form-header, card-header, spinners, pagination, gradients, primary, secondary, default colors.


White skin MDB Pro component

<body class="white-skin">

Black skin MDB Pro component

<body class="black-skin">

Cyan skin MDB Pro component

<body class="cyan-skin">

MDB skin MDB Pro component

<body class="mdb-skin">

Deep purple skin MDB Pro component

<body class="deep-purple-skin">


Pink skin MDB Pro component

<body class="pink-skin">

Indigo skin MDB Pro component

<body class="indigo-skin">

Light blue skin MDB Pro component

<body class="light-blue-skin">

Grey skin MDB Pro component

<body class="grey-skin">

The possibility to add 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 MDB Pro Gulp package.

Instruction of adding custom skin:

In your package in the SCSS catalog, you can see _custom-skin.scss file.

Go to this file and change name of skin and the values of $skins object to your custom colors and safe the file. After that you will have recompiled mdb.css file with your new skin.

In your HTML file, add to the body tag the class for your custom skin, eg. .test-skin class.