web
mobile
Edit these docs Rate these docs

Skins

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.


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)
Edit these docs Rate these docs

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now