File Input

Bootstrap File Input

Bootstrap file input is a field which user can use to upload one or more files (photos, documents or any other file type) from the local storage.

Standard file inputs usually leave a lot to wish for in terms of design, but MDB takes care of that by enhancing them with Material Design best practices.

Most common use examples:

  • CSV upload to CRM system
  • Avatar picture upload
  • Simple GIF upload

Below you can see a number of Bootstrap file inputs created with Material Design for Bootstrap.


Default file input

Default styling for Bootstrap File Input component

Upload


            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
              </div>
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
              </div>
            </div>

          

Material file input MDB Pro component

Material Design styling for Bootstrap File Input component

Choose file


            <form class="md-form">
                <div class="file-field">
                    <div class="btn btn-primary btn-sm float-left">
                        <span>Choose file</span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload your file">
                    </div>
                </div>
            </form>

          

Multiple files input

Material file input MDB Pro component

Choose files


        <form class="md-form" action="#">
            <div class="file-field">
                <div class="btn btn-primary btn-sm float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

      

Placeholder

File inputs with photo placeholder MDB Pro component

example placeholder
Choose file
example placeholder avatar
Add photo


        <form class="md-form">
            <div class="file-field">
                <div class="z-depth-1-half mb-4">
                    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" class="img-fluid" alt="example placeholder">
                </div>
                <div class="d-flex justify-content-center">
                    <div class="btn btn-mdb-color btn-rounded float-left">
                        <span>Choose file</span>
                        <input type="file">
                    </div>
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field">
                <div class="mb-4">
                    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" class="rounded-circle z-depth-1-half avatar-pic" alt="example placeholder avatar">
                </div>
                <div class="d-flex justify-content-center">
                    <div class="btn btn-mdb-color btn-rounded float-left">
                        <span>Add photo</span>
                        <input type="file">
                    </div>
                </div>
            </div>
        </form>

      


          .avatar-pic {
            width: 150px;
          }

      

Floating buttons

File inputs with gradient floating buttons MDB Pro component



        <form class="md-form">
            <div class="file-field">
                <a class="btn-floating peach-gradient mt-0 float-left">
                    <i class="fa fa-paperclip" aria-hidden="true"></i>
                    <input type="file">
                </a>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field">
                <a class="btn-floating blue-gradient mt-0 float-left">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                    <input type="file">
                </a>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field">
                <a class="btn-floating purple-gradient mt-0 float-left">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                    <input type="file">
                </a>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>

      

Large floating buttons

File inputs with large floating buttons MDB Pro component



        <form class="md-form">
            <div class="file-field big">
                <a class="btn-floating btn-lg pink lighten-1 mt-0 float-left">
                    <i class="fa fa-paperclip" aria-hidden="true"></i>
                    <input type="file" multiple>
                </a>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field big">
                <a class="btn-floating btn-lg cyan darken-2 mt-0 float-left">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                    <input type="file" multiple>
                </a>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field big">
                <a class="btn-floating btn-lg amber darken-2 mt-0 float-left">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                    <input type="file" multiple>
                </a>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

      


          .file-field.big .file-path-wrapper {
            height: 3.2rem; }
            .file-field.big .file-path-wrapper .file-path {
              height: 3rem; }

      

Rounded buttons

File inputs with rounded gradient buttons MDB Pro component

Choose file
Choose file
Choose file


        <form class="md-form">
            <div class="file-field">
                <div class="btn btn-rounded purple-gradient btn-sm float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field medium">
                <div class="btn btn-rounded aqua-gradient float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field big-2">
                <div class="btn btn-rounded peach-gradient btn-lg float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>

      


        .file-field.medium .file-path-wrapper {
          height: 3rem; }
          .file-field.medium .file-path-wrapper .file-path {
            height: 2.8rem; }

        .file-field.big-2 .file-path-wrapper {
          height: 3.7rem; }
          .file-field.big-2 .file-path-wrapper .file-path {
            height: 3.5rem; }

      

Rounded outline buttons

File inputs with rounded outline buttons MDB Pro component

Choose file
Choose file
Choose file


        <form class="md-form">
            <div class="file-field">
                <div class="btn btn-outline-success btn-rounded waves-effect btn-sm float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field medium">
                <div class="btn btn-outline-secondary btn-rounded waves-effect float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field big-2">
                <div class="btn btn-outline-warning btn-rounded waves-effect btn-lg float-left">
                    <span>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>

      


        .file-field.medium .file-path-wrapper {
          height: 3rem; }
          .file-field.medium .file-path-wrapper .file-path {
            height: 2.8rem; }

        .file-field.big-2 .file-path-wrapper {
          height: 3.7rem; }
          .file-field.big-2 .file-path-wrapper .file-path {
            height: 3.5rem; }

      

Colorful buttons

File inputs with colorful buttons MDB Pro component

Choose files
Choose files
Choose files


        <form class="md-form" action="#">
            <div class="file-field">
                <div class="btn btn-unique btn-sm float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form" action="#">
            <div class="file-field medium">
                <div class="btn btn-light-blue float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form" action="#">
            <div class="file-field big-2">
                <div class="btn btn-cyan btn-lg float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

      


        .file-field.medium .file-path-wrapper {
          height: 3rem; }
          .file-field.medium .file-path-wrapper .file-path {
            height: 2.8rem; }

        .file-field.big-2 .file-path-wrapper {
          height: 3.7rem; }
          .file-field.big-2 .file-path-wrapper .file-path {
            height: 3.5rem; }

      

Outline buttons

File inputs with outline buttons MDB Pro component

Choose files
Choose files
Choose files


        <form class="md-form" action="#">
            <div class="file-field">
                <div class="btn btn-outline-info waves-effect btn-sm float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form" action="#">
            <div class="file-field medium">
                <div class="btn btn-outline-default waves-effect float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form" action="#">
            <div class="file-field big-2">
                <div class="btn btn-outline-danger waves-effect btn-lg float-left">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

      


        .file-field.medium .file-path-wrapper {
          height: 3rem; }
          .file-field.medium .file-path-wrapper .file-path {
            height: 2.8rem; }

        .file-field.big-2 .file-path-wrapper {
          height: 3.7rem; }
          .file-field.big-2 .file-path-wrapper .file-path {
            height: 3.5rem; }

      

Icons

File inputs with buttons with icons MDB Pro component

Choose files
Choose file
Choose files
Choose file


        <form class="md-form" action="#">
            <div class="file-field">
                <div class="btn blue-gradient btn-sm float-left">
                    <span><i class="fa fa-cloud-upload mr-2" aria-hidden="true"></i>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field">
                <div class="btn btn-pink btn-rounded btn-sm float-left">
                    <span><i class="fa fa-upload mr-2" aria-hidden="true"></i>Choose file</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>
        <form class="md-form" action="#">
            <div class="file-field medium">
                <div class="btn btn-outline-primary waves-effect float-left">
                    <span>Choose files<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>
        <form class="md-form">
            <div class="file-field big-2">
                <div class="btn btn-outline-danger btn-rounded waves-effect btn-lg float-left">
                    <span>Choose file<i class="fa fa-upload ml-3" aria-hidden="true"></i></span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                   <input class="file-path validate" type="text" placeholder="Upload your file">
                </div>
            </div>
        </form>

      


        .file-field.medium .file-path-wrapper {
          height: 3rem; }
          .file-field.medium .file-path-wrapper .file-path {
            height: 2.8rem; }

        .file-field.big-2 .file-path-wrapper {
          height: 3.7rem; }
          .file-field.big-2 .file-path-wrapper .file-path {
            height: 3.5rem; }

      

Cards

File inputs within cards MDB Pro component

Choose file

Choose files


        <!--Card-->
        <div class="card indigo text-center z-depth-2 light-version py-4 px-5">

            <form class="md-form" action="#">
                <div class="file-field">
                    <div class="btn btn-outline-white waves-effect btn-sm float-left">
                        <span>Choose file<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate text-white" type="text" placeholder="Upload your file">
                    </div>
                </div>
            </form>

            <hr class="w-100 my-4">

            <form class="md-form" action="#">
                <div class="file-field">
                    <div class="btn btn-outline-white btn-rounded waves-effect btn-sm float-left">
                        <span>Choose files<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
                        <input type="file" multiple>
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate text-white" type="text" placeholder="Upload one or more files">
                    </div>
                </div>
            </form>

        </div>
        <!--/.Card-->
        <!--Card-->
        <div class="card mdb-color lighten-4 text-center z-depth-2 light-version py-4 px-5">

             <form class="md-form" class="mb-3">
                 <div class="file-field">
                     <a class="btn-floating peach-gradient mt-0 float-left">
                         <i class="fa fa-paperclip" aria-hidden="true"></i>
                         <input type="file">
                     </a>
                     <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload your file">
                     </div>
                 </div>
             </form>

             <form class="md-form" class="mb-3">
                 <div class="file-field">
                     <a class="btn-floating peach-gradient mt-0 float-left">
                         <i class="fa fa-paperclip" aria-hidden="true"></i>
                         <input type="file">
                     </a>
                     <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload your file">
                     </div>
                 </div>
             </form>

             <form class="md-form">
                 <div class="file-field">
                     <a class="btn-floating peach-gradient mt-0 float-left">
                         <i class="fa fa-paperclip" aria-hidden="true"></i>
                         <input type="file">
                     </a>
                     <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload your file">
                     </div>
                 </div>
             </form>

        </div>
        <!--/.Card-->

      


        .card.light-version .file-field input[type=text] {
          border-bottom: 1px solid #fff; }
          .card.light-version .file-field input[type=text]::-webkit-input-placeholder {
            color: #fff;
            font-weight: 300; }
          .card.light-version .file-field input[type=text]::-moz-placeholder {
            color: #fff;
            font-weight: 300; }
          .card.light-version .file-field input[type=text]:-ms-input-placeholder {
            color: #fff;
            font-weight: 300; }
          .card.light-version .file-field input[type=text]::placeholder {
            color: #fff;
            font-weight: 300; }
          .card.light-version .file-field input[type=text]:focus:not([readonly]) {
            -webkit-box-shadow: 0 1px 0 0 #fff;
            box-shadow: 0 1px 0 0 #fff; }
          .card.light-version .file-field input[type=text].valid {
            border-bottom: 1px solid #00c851;
            -webkit-box-shadow: 0 1px 0 0 #00c851;
            box-shadow: 0 1px 0 0 #00c851; }
          .card.light-version .file-field input[type=text]:focus.valid {
            border-bottom: 1px solid #00c851;
            -webkit-box-shadow: 0 1px 0 0 #00c851;
            box-shadow: 0 1px 0 0 #00c851; }

      

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