Edit these docs

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

Live preview

HTML



        <body class="white-skin">

Black skin MDB Pro component

Live preview

HTML



        <body class="black-skin">

Cyan skin MDB Pro component

Live preview

HTML



        <body class="cyan-skin">

MDB skin MDB Pro component

Live preview

HTML



        <body class="mdb-skin">

Deep purple skin MDB Pro component

Live preview

HTML



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

Navy blue skin MDB Pro component

Live preview

HTML



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

Pink skin MDB Pro component

Live preview

HTML



        <body class="pink-skin">

Indigo skin MDB Pro component

Live preview

HTML



        <body class="indigo-skin">

Light blue skin MDB Pro component

Live preview

HTML



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

Grey skin MDB Pro component

Live preview

HTML



        <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)`

Edit 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 10,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!