Edit these docs Rate these docs

Progress Bar

Dynamic initiation and styling

Bootstrap progress bar can be used to set and show current value of progress, initiate the styling and more.

To use dynamic progress bar you need to include JavaScript code. You can find it in addons in the JS folder.


Basic Example

Add new styling to progress bars and set its value by function. To initiate the component use function: $().progressBar(your-value) on the progress bar. You can use this function to change its value whenever you want. In this example you can change last progress bar value on clicking the buttons.



        <div class="container">
          <div class="container bars py-4">

            <div id="bar1" class="progress my-4">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>

            <div id="bar2" class="progress my-4">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>

            <div id="bar3" class="progress my-4">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>

            <div id="bar4" class="progress my-4">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>

          </div>
          <div class="container buttons">

            <div class="row py-2 justify-content-center">
              <div class="col-2 btn-container col-md-1">

                <button type="button" id="btn1" class="btn btn-outline-danger">10%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn2" class="btn btn-outline-danger ">20%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn3" class="btn btn-outline-primary ">30%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn4" class="btn btn-outline-primary ">40%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn5" class="btn btn-outline-primary ">50%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn6" class="btn btn-outline-primary ">60%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn7" class="btn btn-outline-primary ">70%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn8" class="btn btn-outline-primary ">80%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn9" class="btn btn-outline-primary ">90%</button>
              </div>
              <div class="col-2 btn-container col-md-1">
                <button type="button" id="btn10" class="btn btn-outline-success ">100%</button>
              </div>

            </div>
          </div>
          <!-- rating.js file -->
          <script src="js/addons/progressBar.js"></script>

      


        $('#bar1').progressBar(10);
        $('#bar2').progressBar(29);
        $('#bar3').progressBar(30);
        $('#bar4').progressBar(100);

        //testing with buttons functionality
        $('#btn1').on("click", function () {
          $('#bar4').progressBar(10);
        });
        $('#btn2').on("click", function () {
          $('#bar4').progressBar(20);
        });
        $('#btn3').on("click", function () {
          $('#bar4').progressBar(30);
        });
        $('#btn4').on("click", function () {
          $('#bar4').progressBar(40);
        });
        $('#btn5').on("click", function () {
          $('#bar4').progressBar(50);
        });
        $('#btn6').on("click", function () {
          $('#bar4').progressBar(60);
        });
        $('#btn7').on("click", function () {
          $('#bar4').progressBar(70);
        });
        $('#btn8').on("click", function () {
          $('#bar4').progressBar(80);
        });
        $('#btn9').on("click", function () {
          $('#bar4').progressBar(90);
        });
        $('#btn10').on("click", function () {
          $('#bar4').progressBar(100);
        });
      

Material Design

Style material progress bar using the same classes as usual, just use js initialization code.



        <div class="container bars py-4">

          <div id="bar5" class="progress md-progress my-4">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

          <div id="bar6" class="progress md-progress my-4">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

          <div id="bar7" class="progress md-progress my-4">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

          <div id="bar8" class="progress md-progress my-4">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

        </div>
        <div class="container buttons">

          <div class="row py-2 justify-content-center">
            <div class="col-2 btn-container col-md-1">

              <button type="button" id="btn11" class="btn btn-outline-danger">10%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn12" class="btn btn-outline-danger ">20%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn13" class="btn btn-outline-primary ">30%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn14" class="btn btn-outline-primary ">40%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn15" class="btn btn-outline-primary ">50%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn16" class="btn btn-outline-primary ">60%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn17" class="btn btn-outline-primary ">70%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn18" class="btn btn-outline-primary ">80%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn19" class="btn btn-outline-primary ">90%</button>
            </div>
            <div class="col-2 btn-container col-md-1">
              <button type="button" id="btn20" class="btn btn-outline-success ">100%</button>
            </div>

          </div>
        </div>

        <!-- rating.js file -->
        <script src="js/addons/progressBar.js"></script>

      


        $('#bar5').progressBar(10);
        $('#bar6').progressBar(29);
        $('#bar7').progressBar(30);
        $('#bar8').progressBar(100);

        //testing with buttons functionality
        $('#btn11').on("click", function () {
          $('#bar8').progressBar(10);
        });
        $('#btn12').on("click", function () {
          $('#bar8').progressBar(20);
        });
        $('#btn13').on("click", function () {
          $('#bar8').progressBar(30);
        });
        $('#btn14').on("click", function () {
          $('#bar8').progressBar(40);
        });
        $('#btn15').on("click", function () {
          $('#bar8').progressBar(50);
        });
        $('#btn16').on("click", function () {
          $('#bar8').progressBar(60);
        });
        $('#btn17').on("click", function () {
          $('#bar8').progressBar(70);
        });
        $('#btn18').on("click", function () {
          $('#bar8').progressBar(80);
        });
        $('#btn19').on("click", function () {
          $('#bar8').progressBar(90);
        });
        $('#btn20').on("click", function () {
          $('#bar8').progressBar(100);
        });
        
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

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