Skins

Bootstrap skins

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 Bootstrap 5.
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 <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

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

          <body class="white-skin">

Black skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="black-skin">

Cyan skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="cyan-skin">

MDB skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="mdb-skin">

Deep purple skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

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

Pink skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="pink-skin">

Indigo skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="indigo-skin">

Light blue skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

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

Grey skin MDB Pro component

Basic MDB template with a white skin. Live preview
Edit in sandbox 
        
            

        <body class="grey-skin">

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 _custom-skin.scss file.

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.

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

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:
1 skin-primary-color
  • background-color of the class .primary-color
  • border-color of the spinner component
  • background-color of the active page item in the pagination
  • color of the class .page-link
2 skin-navbar
  • background-color of the class .navbar
  • color of the class .form-control in the navbar component
  • color of the placeholder in the class .form-control (as above)
  • background-color of the class .top-nav-collapse
3 skin-footer-color
  • background-color of the class .page-footer
4 skin-accent
  • background-color for the pseudo-elements :hover,:focus,:active in the class .navbar .dropdown-menu a
  • border for the class .sn-avatar-wrapper img
  • color for the classes .fas,.far,.fab in the class .social
  • border-color for the elements .md-outline input and .md-outline textarea on state &:focus:not([readonly])
  • box-shadow for the elements .md-outline input and .md-outline textarea on state &:focus:not([readonly])
  • color for the elements .md-outline input label and .md-outline textarea label on state &:focus:not([readonly])
  • background-image for the elements input and textarea.md-textarea in the class .md-bg
  • border-color for the elements input and textarea.md-textarea on state &:focus:not([readonly])
  • box-shadow for the elements input and textarea.md-textarea on state &:focus:not([readonly])
  • color for the elements input label and textarea.md-textarea label on state &:focus:not([readonly])
  • border-right for the element input[type="checkbox"]:checked+label:before
  • border-bottom for the element input[type="checkbox"]:checked+label:before
  • background-color for the pseudo-element :after in the element input[type="checkbox"].filled-in:checked+label
  • border-color for the pseudo-element :after in the element input[type="checkbox"].filled-in:checked+label
  • color for the element .md-form .prefix.active
  • color for the element .caret.active in the class .select-wrapper
  • border-color for the element .select-dropdown:focus in the class .select-wrapper
  • box-shadow for the element .select-dropdown:focus in the class .select-wrapper
  • color for the element input+label.active in the class .select-wrapper
  • background-color for the elements .dropdown-content li.active, .dropdown-content li a, .dropdown-content li span:hover in the class .select-wrapper
  • color for the element input+label.active in the class .select-wrapper
  • background-color for the class .carousel-indicators
  • background-color for the classes .form-header, .card-header
5 skin-flat
  • background-color of the class .side-nav
6 skin-sidenav-item
  • color of the class .collapsible-header.active in the White Skin
7 skin-sidenav-item-hover
  • background-color of the class .collapsible-header.active in all other skins
  • background-color on :hover in the class .collapsible-header
8 skin-gradient-start
  • background of the class .gradient
  • initial background value for the linear-gradient of the class .gradient
9 skin-gradient-end
  • final background value for the linear-gradient of the class .gradient
10 skin-mask-slight
  • background for the :after pseudo-element in the class .mask-slight in the class .sidenav-bg
11 skin-mask-light
  • background for the :after pseudo-element in the class .mask-light in the class .sidenav-bg
12 skin-mask-strong
  • background for the :after pseudo-element in the class .mask-strong in the class .sidenav-bg
  • background for the :after pseudo-element in the class .sidenav-bg
13 skin-sn-child
  • color for the :hover,.active,:active elements in the class .collapsible-body a
  • color for the :hover,.active,:active elements in the class a:not(.collapsible-header)
14 skin-btn-primary
  • background-color of the class .btn-primary in the button component
  • color and border-color of the class .btn-outline-primary in the outline button component
15 skin-btn-secondary
  • background-color of the class .btn-secondary in the button component
  • color and border-color of the class .btn-outline-secondary in the outline button component
16 skin-btn-default
  • background-color of the class .btn-default in the button component
  • color and border-color of the class .btn-outline-default in the outline button component
17 skin-text
  • color for the class .navbar
  • color for the tag a in white skin
  • color for the class .double-nav a
  • color for the class .navbar .form-control
  • color for the pseudo-element :placeholder in the class .form-control
  • color for the classes a.fas,a.far,a.fab in white-skin
  • color for the class .search-form .md-form input in white-skin
  • color for the pseudo-element :placeholder in the class .search-form .md-form input in white-skin
  • color for the class .collapsible-header
  • color for the class .collapsible-body a
  • color for the classes .fas,.far,.fab in the class .collapsible-body a
  • color for the elements :hover,.active,:active in the class a:not(.collapsible-header)