Modal Form
Bootstrap Modal Form
Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users.
Using them alongside valuable content might bring a lot of business value to your project.
However, you should remember that using them in a spammy manner might have a completely different outcome - drop of UX and frustrating your users.
Examples of Bootstrap modal form use:
- Email signup
- Register modal
- Contact form
If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .
See also: Modal Core Documentation, Modal Styles and Modal Templates.
Simple modal login
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
Modal Login Form</a>
</div>
Simple modal register
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">Launch
Modal Register Form</a>
</div>
Simple modal subscription
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Your name</label>
</div>
<div class="md-form mb-4">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Your email</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscriptionForm">Launch
Modal Subscription Form</a>
</div>
Simple modal contact
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form34" class="form-control validate">
<label data-error="wrong" data-success="right" for="form34">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="form29" class="form-control validate">
<label data-error="wrong" data-success="right" for="form29">Your email</label>
</div>
<div class="md-form mb-5">
<i class="fa fa-tag prefix grey-text"></i>
<input type="text" id="form32" class="form-control validate">
<label data-error="wrong" data-success="right" for="form32">Subject</label>
</div>
<div class="md-form">
<i class="fa fa-pencil prefix grey-text"></i>
<textarea type="text" id="form8" class="md-textarea form-control" rows="4"></textarea>
<label data-error="wrong" data-success="right" for="form8">Your message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-unique">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm">Launch
Modal Contact Form</a>
</div>
Cascading modal register / login MDB Pro component
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-user mr-1"></i>
Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fa fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
<div class="tab-pane fade in show active" id="panel7" role="tabpanel">
<!--Body-->
<div class="modal-body mb-1">
<div class="md-form form-sm mb-5">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="modalLRInput10" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput10">Your email</label>
</div>
<div class="md-form form-sm mb-4">
<i class="fa fa-lock prefix"></i>
<input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput11">Your password</label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info">Log in <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
<p>Forgot <a href="#" class="blue-text">Password?</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 7-->
<!--Panel 8-->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm mb-5">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput12">Your email</label>
</div>
<div class="md-form form-sm mb-5">
<i class="fa fa-lock prefix"></i>
<input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput13">Your password</label>
</div>
<div class="md-form form-sm mb-4">
<i class="fa fa-lock prefix"></i>
<input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput14">Repeat password</label>
</div>
<div class="text-center form-sm mt-2">
<button class="btn btn-info">Sign up <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-right">
<p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 8-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form-->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded my-3" data-toggle="modal" data-target="#modalLRForm">Launch
Modal LogIn/Register</a>
</div>
Modal with avatar
Maria Doe
<!--Modal: Login with Avatar Form-->
<div class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" class="rounded-circle img-responsive">
</div>
<!--Body-->
<div class="modal-body text-center mb-1">
<h5 class="mt-1 mb-2">Maria Doe</h5>
<div class="md-form ml-0 mr-0">
<input type="password" type="text" id="form29" class="form-control form-control-sm validate ml-0">
<label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
</div>
<div class="text-center mt-4">
<button class="btn btn-cyan mt-1">Login <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login with Avatar Form-->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#modalLoginAvatar">Launch
Modal Login with Avatar</a>
</div>
Subscription modal with orange header
<div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form mb-5">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Your email</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fa fa-paper-plane-o ml-1"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Launch
modal Subscription</a>
</div>
.modal-notify .modal-header {
border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
border-radius: 3px;
}
Elegant modal login MDB Pro component
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mx-4">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email1" class="form-control validate">
<label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass1" class="form-control validate">
<label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
<p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
Password?</a></p>
</div>
<div class="text-center mb-3">
<button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
with:</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-facebook text-center"></i></button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-twitter"></i></button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fa fa-google-plus"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
Sign Up</a></p>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#elegantModalForm">Launch
modal Login Form</a>
</div>
.form-elegant .font-small {
font-size: 0.8rem; }
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }
.form-elegant .modal-header {
border-bottom: none; }
.modal-dialog .form-elegant .btn .fa {
color: #2196f3!important; }
.form-elegant .modal-body, .form-elegant .modal-footer {
font-weight: 400; }
Dark modal register MDB Pro component
<!-- Modal -->
<div class="modal fade" id="darkModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog form-dark" role="document">
<!--Content-->
<div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
<div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<!--Header-->
<div class="modal-header text-center pb-4">
<h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel"><strong>SIGN</strong> <a
class="green-text font-weight-bold"><strong> UP</strong></a></h3>
<button type="button" class="close white-text" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email5" class="form-control validate white-text">
<label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass5" class="form-control validate white-text">
<label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
<div class="form-group mt-4">
<input class="form-check-input" type="checkbox" id="checkbox624">
<label for="checkbox624" class="white-text form-check-label">Accept the<a href="#" class="green-text font-weight-bold">
Terms and Conditions</a></label>
</div>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="text-center mb-3 col-md-12">
<button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign up</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#" class="green-text ml-1 font-weight-bold">
Log in</a></p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#darkModalForm">Launch modal
register Form</a>
</div>
.form-dark .font-small {
font-size: 0.8rem; }
.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
font-size: 0.8rem; }
.form-dark [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px; }
.form-dark .md-form label {
color: #fff; }
.form-dark input[type=email]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }
.form-dark input[type=email]:focus:not([readonly]) + label {
color: #fff; }
.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }
.form-dark input[type=password]:focus:not([readonly]) + label {
color: #fff; }
.form-dark input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s; }
.form-dark input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
.form-dark .modal-header {
border-bottom: none;
}
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
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
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue