Inputs

Bootstrap inputs

Bootstrap input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms.

You can use default bootstrap style or the Material Design version.

In case you want to create your custom form, have a look at specific pages of our documentation from the list below or use our Form Builder:

Drag & drop form builder 


            <!-- Default input -->
            <label for="exampleForm2">Default input</label>
            <input type="text" id="exampleForm2" class="form-control">

          


            <!-- Material input -->
            <div class="md-form">
              <input type="text" id="form1" class="form-control">
              <label for="form1">Example label</label>
            </div>

Examples of use

In that section you can see where you can use a plenty of inputs.

Also check our documentation where inputs are using:

Input fields

Inputs field are fields where you can put your data and you can use diffrent size of inputs.

Default input 




            <!-- Large input -->
            <input class="form-control form-control-lg" type="text" placeholder="Large input">

            <!-- Small input -->
            <input class="form-control" type="text" placeholder="Medium input">

            <!-- Small input -->
            <input class="form-control form-control-sm" type="text" placeholder="Small input">

Material input 


            <!-- Large input -->
            <div class="md-form form-lg">
              <input type="text" id="inputLGEx" class="form-control form-control-lg">
              <label for="inputLGEx">Large input</label>
            </div>

            <!-- Medium input -->
            <div class="md-form">
              <input type="text" id="inputMDEx" class="form-control">
              <label for="inputMDEx">Medium input</label>
            </div>

            <!-- Small input -->
            <div class="md-form form-sm">
              <input type="text" id="inputSMEx" class="form-control form-control-sm">
              <label for="inputSMEx">Small input</label>
            </div>

Icon Prefixes



            <!-- Material input -->
            <div class="md-form">
              <i class="fa fa-user prefix"></i>
              <input type="text" id="inputIconEx2" class="form-control">
              <label for="inputIconEx2">E-mail address</label>
            </div>
          


            <!-- Material input -->
            <div class="md-form">
              <i class="fa fa-envelope prefix"></i>
              <input type="text" id="inputIconEx1" class="form-control">
              <label for="inputIconEx1">E-mail address</label>
            </div>

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

To use not-allowed cursor add .disabled class to the label.



            <!-- Default input -->
            <label for="inputDisabledEx2" class="disabled">Example label</label>
            <input type="text" id="inputDisabledEx2" class="form-control" disabled>

          


            <!-- Material input -->
            <div class="md-form">
              <input type="text" id="inputDisabledEx" class="form-control" disabled>
              <label for="inputDisabledEx" class="disabled">Example label</label>
            </div>

Error or Success Messages


            <!-- Material input -->
            <div class="md-form">
              <i class="fa fa-lock prefix"></i>
              <input type="password" id="inputValidationEx2" class="form-control validate">
              <label for="inputValidationEx2" data-error="wrong" data-success="right">Type your password</label>
            </div>
          


            <!-- Material input -->
            <div class="md-form">
              <i class="fa fa-envelope prefix"></i>
              <input type="email" id="inputValidationEx" class="form-control validate">
              <label for="inputValidationEx" data-error="wrong" data-success="right">Type your email</label>
            </div>

Placeholder



        <!-- Material input -->
        <div class="md-form">
          <input placeholder="Placeholder" type="text" id="inputPlaceholderEx" class="form-control">
          <label for="inputPlaceholderEx">Placeholder</label>
        </div>

Pre-filling Text Inputs



        <!-- Material input -->
        <div class="md-form">
          <input value="John Doe" type="text" id="inputPrefilledEx" class="form-control">
          <label for="inputPrefilledEx">Example label</label>
        </div>

Layout

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.



            <!-- Default form group -->
            <form>
              <!-- Default input -->
              <div class="form-group">
                <label for="formGroupExampleInput">Example label</label>
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
              </div>
              <!-- Default input -->
              <div class="form-group">
                <label for="formGroupExampleInput2">Another label</label>
                <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
              </div>
            </form>
            <!-- Default form group -->

          


            <!-- Material form group -->
            <form>
              <!-- Material input -->
              <div class="md-form form-group mt-5">
                <input type="text" class="form-control" id="formGroupExampleInputMD" placeholder="Example input">
                <label for="formGroupExampleInputMD">Example label</label>
              </div>
              <!-- Material input -->
              <div class="md-form form-group mt-5">
                <input type="text" class="form-control" id="formGroupExampleInput2MD" placeholder="Another input">
                <label for="formGroupExampleInput2MD">Another label</label>
              </div>
            </form>
            <!-- Material form group -->

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.



            <!-- Default form grid -->
            <form>
              <!-- Grid row -->
              <div class="row">
                <!-- Grid column -->
                <div class="col">
                  <!-- Default input -->
                  <input type="text" class="form-control" placeholder="First name">
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col">
                  <!-- Default input -->
                  <input type="text" class="form-control" placeholder="Last name">
                </div>
                <!-- Grid column -->
              </div>
              <!-- Grid row -->
            </form>
            <!-- Default form grid -->

          



            <!-- Material form grid -->
            <form>
              <!-- Grid row -->
              <div class="row">
                <!-- Grid column -->
                <div class="col">
                  <!-- Material input -->
                  <div class="md-form mt-0">
                    <input type="text" class="form-control" placeholder="First name">
                  </div>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col">
                  <!-- Material input -->
                  <div class="md-form mt-0">
                    <input type="text" class="form-control" placeholder="Last name">
                  </div>
                </div>
                <!-- Grid column -->
              </div>
              <!-- Grid row -->
            </form>
            <!-- Material form grid -->

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.



        <!-- Material form row -->
        <form>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="First name">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Last name">
              </div>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </form>
        <!-- Material form row -->

      


        <!-- Default form row -->
        <form>
          <!-- Grd row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input type="text" class="form-control" placeholder="First name">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input type="text" class="form-control" placeholder="Last name">
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grd row -->
        </form>
        <!-- Default form row -->

More complex layouts can also be created with the grid system.



        <!-- Extended material form grid -->
        <form>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col-md-6">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="email" class="form-control" id="inputEmail4MD" placeholder="Email">
                <label for="inputEmail4MD">Email</label>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="password" class="form-control" id="inputPassword4MD" placeholder="Password">
                <label for="inputPassword4MD">Password</label>
              </div>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">
            <!-- Grid column -->
            <div class="col-md-12">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St">
                <label for="inputAddressMD">Address</label>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-12">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor">
                <label for="inputAddress2MD">Address 2</label>
              </div>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col-md-6">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="text" class="form-control" id="inputCityMD" placeholder="New York City">
                <label for="inputCityMD">City</label>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6">
              <!-- Material input -->
              <div class="md-form form-group">
                <input type="text" class="form-control" id="inputZipMD" placeholder="11206-1117">
                <label for="inputZipMD">Zip</label>
              </div>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
          <button type="submit" class="btn btn-primary btn-md">Sign in</button>
        </form>
        <!-- Extended material form grid -->

      


        <!-- Extended default form grid -->
        <form>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Default input -->
            <div class="form-group col-md-6">
              <label for="inputEmail4">Email</label>
              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
            </div>
            <!-- Default input -->
            <div class="form-group col-md-6">
              <label for="inputPassword4">Password</label>
              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
            </div>
          </div>
          <!-- Grid row -->

          <!-- Default input -->
          <div class="form-group">
            <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
          </div>
          <!-- Default input -->
          <div class="form-group">
            <label for="inputAddress2">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
          </div>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Default input -->
            <div class="form-group col-md-6">
              <label for="inputCity">City</label>
              <input type="text" class="form-control" id="inputCity" placeholder="New York City">
            </div>
            <!-- Default input -->
            <div class="form-group col-md-6">
              <label for="inputZip">Zip</label>
              <input type="text" class="form-control" id="inputZip" placeholder="11206-1117">
            </div>
          </div>
          <!-- Grid row -->
          <button type="submit" class="btn btn-primary btn-md">Sign in</button>
        </form>
        <!-- Extended default form grid -->

Horizontal form

Create horizontal forms with a grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create the perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.



        <!-- Horizontal material form -->
        <form>
          <!-- Grid row -->
          <div class="form-group row">
            <!-- Material input -->
            <label for="inputEmail3MD" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <div class="md-form mt-0">
                <input type="email" class="form-control" id="inputEmail3MD" placeholder="Email">
              </div>
            </div>
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="form-group row">
            <!-- Material input -->
            <label for="inputPassword3MD" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <div class="md-form mt-0">
                <input type="password" class="form-control" id="inputPassword3MD" placeholder="Password">
              </div>
            </div>
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="form-group row">
            <div class="col-sm-10">
              <button type="submit" class="btn btn-primary btn-md">Sign in</button>
            </div>
          </div>
          <!-- Grid row -->
        </form>
        <!-- Horizontal material form -->
      


        <!-- Default horizontal form -->
        <form>
          <!-- Grid row -->
          <div class="form-group row">
            <!-- Default input -->
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="form-group row">
            <!-- Default input -->
            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="form-group row">
            <div class="col-sm-10">
              <button type="submit" class="btn btn-primary btn-md">Sign in</button>
            </div>
          </div>
          <!-- Grid row -->
        </form>
        <!-- Default horizontal form -->

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.




        <!-- Material column sizing form -->
        <form>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col-7">
              <!-- Material input -->
              <div class="md-form">
                <input type="text" class="form-control" placeholder="City">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form">
                <input type="text" class="form-control" placeholder="State">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form">
                <input type="text" class="form-control" placeholder="Zip">
              </div>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </form>
        <!-- Material column sizing form -->

      


        <!-- Default column sizing form -->
        <form>
          <!-- Grid row -->
          <div class="form-row">
            <!-- Grid column -->
            <div class="col-7">
              <!-- Default input -->
              <input type="text" class="form-control" placeholder="City">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input type="text" class="form-control" placeholder="State">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Default input -->
              <input type="text" class="form-control" placeholder="Zip">
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </form>
        <!-- Default column sizing form -->

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes are based on their contents.

@ 

        <!-- Material auto-sizing form -->
        <form>
          <!-- Grid row -->
          <div class="form-row align-items-center">
            <!-- Grid column -->
            <div class="col-auto">
              <!-- Material input -->
              <div class="md-form">
                <input type="text" class="form-control mb-2" id="inlineFormInputMD" placeholder="Jane Doe">
                <label class="sr-only" for="inlineFormInputMD">Name</label>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-auto">
              <!-- Material input -->
              <label class="sr-only" for="inlineFormInputGroupMD">Username</label>
              <div class="md-form input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text md-addon">@</span>
                </div>
                <input type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupMD" placeholder="Username">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-0">Submit</button>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </form>
        <!-- Material auto-sizing form -->
@


        <!-- Default auto-sizing form -->
        <form>
          <!-- Grid row -->
          <div class="form-row align-items-center">
            <!-- Grid column -->
            <div class="col-auto">
              <!-- Default input -->
              <label class="sr-only" for="inlineFormInput">Name</label>
              <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-auto">
              <!-- Default input -->
              <label class="sr-only" for="inlineFormInputGroup">Username</label>
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">@</div>
                </div>
                <input type="text" class="form-control py-0" id="inlineFormInputGroup" placeholder="Username">
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-auto">
              <button type="submit" class="btn btn-primary btn-md mt-0">Submit</button>
            </div>
          </div>
          <!-- Grid row -->
        </form>
        <!-- Default auto-sizing form -->

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.

  • Controls are display: flex, that collapse any HTML white space and allowing you to provide alignment controls with spacing and flexbox utilities.
  • Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 576px wide so to account for narrow viewports on mobile devices.

You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form control, even if you need to hide it from non-screenreader visitors with .sr-only.

@ 


        <!-- Material inline form -->
        <form class="form-inline">
          <!-- Material input -->
          <div class="md-form">
            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2MD" placeholder="Jane Doe">
            <label class="sr-only" for="inlineFormInputName2MD">Name</label>
          </div>
          <!-- Material input -->
          <label class="sr-only" for="inlineFormInputGroupUsername2MD">Username</label>
          <div class="md-form input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text md-addon">@</span>
            </div>
            <input type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupUsername2MD" placeholder="Username">
          </div>
          <!-- Checkbox -->
          <div class="form-check mb-2 mr-sm-2">
            <input class="form-check-input" type="checkbox" id="inlineFormCheckMD">
            <label class="form-check-label" for="inlineFormCheckMD">
              Remember me
            </label>
          </div>

          <button type="submit" class="btn btn-primary mb-0">Submit</button>
        </form>
        <!-- Material inline form -->
@


        <!-- Default inline form -->
        <form class="form-inline">
          <!-- Default input -->
          <label class="sr-only" for="inlineFormInputName2">Name</label>
          <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
          <!-- Default input -->
          <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
          <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">@</div>
            </div>
            <input type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
          </div>
          <!-- Checkbox -->
          <div class="form-check mb-2 mr-sm-2">
            <input class="form-check-input" type="checkbox" id="inlineFormCheck">
            <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
          </div>

          <button type="submit" class="btn btn-primary btn-md mt-0">Submit</button>
        </form>
        <!-- Default inline form -->

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes such as .text-muted.

Associating help text with form controls

The help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses on or enters the control.

Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above it.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 


            <!-- Default input with help text-->
            <label for="inputPassword5">Password</label>
            <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
            <small id="passwordHelpBlock" class="form-text text-muted">
              Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces,
              special characters,
              or emoji.
            </small>
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 


            <!-- Material input with help text -->
            <div class="md-form">
              <input type="password" id="inputPassword5MD" class="form-control" aria-describedby="passwordHelpBlockMD">
              <label for="inputPassword5MD">Password</label>
              <small id="passwordHelpBlockMD" class="form-text text-muted">
                Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces,
                special characters, or emoji.
              </small>
            </div>

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

Must be 8-20 characters long. 


        <!-- Default form inline -->
        <form class="form-inline">
          <!-- Default input with help text -->
          <div class="form-group">
            <label for="inputPassword6">Password</label>
            <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
            <small id="passwordHelpInline" class="text-muted">
              Must be 8-20 characters long.
            </small>
          </div>
          <!-- Default input with help text -->
        </form>
        <!-- Default form inline -->
Must be 8-20 characters long. 


        <!-- Material form inline -->
        <form class="form-inline">
          <!-- Material input with help text -->
          <div class="md-form form-group mt-0">
            <input type="password" id="inputPassword6MD" class="form-control mr-sm-3" aria-describedby="passwordHelpInlineMD">
            <label for="inputPassword6MD">Password</label>
            <small id="passwordHelpInlineMD" class="text-muted">
              Must be 8-20 characters long.
            </small>
          </div>
          <!-- Material input with help text -->
        </form>
        <!-- Material form inline -->

Character counter

Use a character counter in fields where a character restriction is in place.

Input field



        <div class="md-form">
          <input id="input-char-counter" type="text" length="10" class="form-control">
          <label for="input-char-counter">Input text</label>
        </div>

Textarea



        <div class="md-form">
          <textarea id="textarea-char-counter" class="form-control md-textarea" length="120" rows="3"></textarea>
          <label for="textarea-char-counter">Type your text</label>
        </div>

Optional initialization

If you are aadding a character counter dynamically, you can use the function below to initialize it.



        $(document).ready(function() {
        $('input#input_text, textarea#textarea1').characterCounter();
        });

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 About

MDB 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 Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

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 tutorial

Integrations 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