Sign in


Sign up


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.

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.


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">