Rate this docs

Extended Cards

Bootstrap Extended Cards


Promoting card MDB Pro component

avatar

New spicy meals

07/24/2018

Recently, we added several exotic new dishes to the menu of our restaurant. They come from countries such as Mexico, Argentina, and Spain. Come to us, have a delicious wine and enjoy the juicy meals from around the world.



        <!-- Card -->
        <div class="card promoting-card">

          <!-- Card content -->
          <div class="card-body d-flex flex-row">

            <!-- Avatar -->
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">

            <!-- Content -->
            <div>

              <!-- Title -->
              <h4 class="card-title font-weight-bold mb-2">New spicy meals</h4>
              <!-- Subtitle -->
              <p class="card-text"><i class="fa fa-clock-o pr-2"></i>07/24/2018</p>

            </div>

          </div>

          <!-- Card image -->
          <div class="view overlay">
            <img class="card-img-top rounded-0" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/full page/2.jpg" alt="Card image cap">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body">

            <div class="collapse-content">

              <!-- Text -->
              <p class="card-text collapse" id="collapseContent">Recently, we added several exotic new dishes to the menu of our restaurant. They come from countries such as Mexico, Argentina, and Spain. Come to us, have a delicious wine and enjoy the juicy meals from around the world.</p>
              <!-- Button -->
              <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
              <i class="fa fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
              <i class="fa fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>

            </div>

          </div>

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

      


        .collapse-content .fa.fa-heart:hover {
          color: #f44336 !important;
        }
        .collapse-content .fa.fa-share-alt:hover {
          color: #0d47a1 !important;
        }

      

Weather card MDB Pro component

Warsaw

Mon, 12:30 PM, Mostly Sunny

23

3% Precipitation

21 hm/h Winds

  • 8AM
  • 11AM
  • 2PM
  • 5PM
  • 8PM
Tuesday

24°/12°

Wednesday

19°/10°

Thursday

23°/15°

Friday

26°/19°

Saturday

20°/16°

Sunday

22°/13°




        <!-- Card -->
        <div class="card weather-card">

          <!-- Card content -->
          <div class="card-body pb-3">

            <!-- Title -->
            <h4 class="card-title font-weight-bold">Warsaw</h4>
            <!-- Text -->
            <p class="card-text">Mon, 12:30 PM, Mostly Sunny</p>
            <div class="d-flex justify-content-between">
              <p class="display-1 degree">23</p>
              <i class="fa fa-sun-o fa-5x pt-3 amber-text"></i>
            </div>
            <div class="d-flex justify-content-between mb-4">
              <p><i class="fa fa-tint fa-lg text-info pr-2"></i>3% Precipitation</p>
              <p><i class="fa fa-leaf fa-lg grey-text pr-2"></i>21 hm/h Winds</p>
            </div>
            <div class="progress md-progress">
              <div class="progress-bar black" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <ul class="list-unstyled d-flex justify-content-between font-small text-muted mb-4">
              <li class="pl-4">8AM</li>
              <li>11AM</li>
              <li>2PM</li>
              <li>5PM</li>
              <li class="pr-4">8PM</li>
            </ul>

            <div class="collapse-content">

              <div class="collapse" id="collapseExample">

                <table class="table table-borderless table-sm mb-0">
                  <tbody>
                    <tr>
                      <td class="font-weight-normal align-middle">Tuesday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">24&deg;<span class="text-muted">/12&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-sun-o fa-lg amber-text"></i>
                      </td>
                    </tr>
                    <tr>
                      <td class="font-weight-normal align-middle">Wednesday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">19&deg;<span class="text-muted">/10&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-cloud fa-lg text-info"></i>
                      </td>
                    </tr>
                    <tr>
                      <td class="font-weight-normal align-middle">Thursday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">23&deg;<span class="text-muted">/15&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-sun-o fa-lg amber-text"></i>
                      </td>
                    </tr>
                    <tr>
                      <td class="font-weight-normal align-middle">Friday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">26&deg;<span class="text-muted">/19&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-sun-o fa-lg amber-text"></i>
                      </td>
                    </tr>
                    <tr>
                      <td class="font-weight-normal align-middle">Saturday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">20&deg;<span class="text-muted">/16&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-cloud fa-lg text-info"></i>
                      </td>
                    </tr>
                    <tr>
                      <td class="font-weight-normal align-middle">Sunday</td>
                      <td class="float-right font-weight-normal">
                        <p class="mb-1">22&deg;<span class="text-muted">/13&deg;</span></p>
                      </td>
                      <td class="float-right mr-3">
                        <i class="fa fa-sun-o fa-lg amber-text"></i>
                      </td>
                    </tr>
                  </tbody>
                </table>

              </div>

              <hr class="">

                <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 deep-purple-text collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>

            </div>

          </div>

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

      

Booking card MDB Pro component

La Sirena restaurant

  • 4.5 (413)

$ • American, Restaurant

Some quick example text to build on the card title and make up the bulk of the card's content.


Tonight's availability

  • 5:30PM
  • 7:30PM
  • 8:00PM
  • 9:00PM
Button


        <!-- Card -->
        <div class="card booking-card">

          <!-- Card image -->
          <div class="view overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/8-col/img (5).jpg" alt="Card image cap">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body">

            <!-- Title -->
            <h4 class="card-title font-weight-bold"><a>La Sirena restaurant</a></h4>
            <!-- Data -->
            <ul class="list-unstyled list-inline rating mb-0">
              <li class="list-inline-item mr-0"><i class="fa fa-star amber-text"> </i></li>
              <li class="list-inline-item mr-0"><i class="fa fa-star amber-text"></i></li>
              <li class="list-inline-item mr-0"><i class="fa fa-star amber-text"></i></li>
              <li class="list-inline-item mr-0"><i class="fa fa-star amber-text"></i></li>
              <li class="list-inline-item"><i class="fa fa-star-half-o amber-text"></i></li>
              <li class="list-inline-item"><p class="text-muted">4.5 (413)</p></li>
            </ul>
            <p class="mb-2">$ • American, Restaurant</p>
            <!-- Text -->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <hr class="my-4">
            <p class="lead"><strong>Tonight's availability</strong></p>
            <ul class="list-unstyled list-inline d-flex justify-content-between mb-0">
              <li class="list-inline-item mr-0">
                <div class="chip mr-0">5:30PM</div>
              </li>
              <li class="list-inline-item mr-0">
                <div class="chip deep-purple white-text mr-0">7:30PM</div>
              </li>
              <li class="list-inline-item mr-0">
                <div class="chip mr-0">8:00PM</div>
              </li>
              <li class="list-inline-item mr-0">
                <div class="chip mr-0">9:00PM</div>
              </li>
            </ul>
            <!-- Button -->
            <a href="#" class="btn btn-flat deep-purple-text p-1 mx-0 mb-0">Button</a>

          </div>

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

      

Gradient cards MDB Pro component

Today's sale

2000$

Better than last week (25%)

Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.

Subscriptions

200

Worse than last week (25%)

Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.

Traffic

20000

Worse than last week (75%)

Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.

Organic traffic

2000

Better than last week (50%)

Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.



          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-md-6 mb-4">

              <!-- Card -->
              <div class="card gradient-card">

                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">

                    <!-- Content -->
                    <a href="#!">
                      <div class="text-white d-flex h-100 mask blue-gradient-rgba">
                        <div class="first-content align-self-center p-3">
                          <h3 class="card-title">Today's sales</h3>
                          <p class="lead mb-0">Click on this card to see details</p>
                        </div>
                        <div class="second-content align-self-center mx-auto text-center">
                          <i class="fa fa-money fa-3x"></i>
                        </div>
                      </div>
                    </a>

                  </div>

                  <!-- Data -->
                  <div class="third-content ml-auto mr-4 mb-2">
                    <p class="text-uppercase text-muted">Today's sale</p>
                    <h4 class="font-weight-bold float-right">2000$</h4>
                  </div>

                  <!-- Content -->
                  <div class="card-body white">
                    <div class="progress md-progress">
                      <div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted">Better than last week (25%)</p>
                    <h4 class="text-uppercase font-weight-bold my-4">Details</h4>
                    <p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
                  </div>

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

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4">

              <!-- Card -->
              <div class="card gradient-card">

                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                    <!-- Content -->
                    <a href="#!">
                      <div class="text-white d-flex h-100 mask purple-gradient-rgba">
                        <div class="first-content align-self-center p-3">
                          <h3 class="card-title">Subscriptions</h3>
                          <p class="lead mb-0">Click on this card to see details</p>
                        </div>
                        <div class="second-content  align-self-center mx-auto text-center">
                          <i class="fa fa-line-chart fa-3x"></i>
                        </div>
                      </div>
                    </a>

                  </div>

                  <!-- Data -->
                  <div class="third-content  ml-auto mr-4 mb-2">
                    <p class="text-uppercase text-muted">Subscriptions</p>
                    <h4 class="font-weight-bold float-right">200</h4>
                  </div>

                  <!-- Content -->
                  <div class="card-body white">
                    <div class="progress md-progress">
                      <div class="progress-bar purple lighten-2" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted">Worse than last week (25%)</p>
                    <h4 class="text-uppercase font-weight-bold my-4">Details</h4>
                    <p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
                  </div>

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

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4">

              <!-- Card -->
              <div class="card gradient-card">

                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                    <!-- Content -->
                    <a href="#!">
                      <div class="text-white d-flex h-100 mask peach-gradient-rgba">
                        <div class="first-content align-self-center p-3">
                          <h3 class="card-title">Traffic</h3>
                          <p class="lead mb-0">Click on this card to see details</p>
                        </div>
                        <div class="second-content  align-self-center mx-auto text-center">
                          <i class="fa fa-pie-chart fa-3x"></i>
                        </div>
                      </div>
                    </a>

                  </div>

                  <!-- Data -->
                  <div class="third-content  ml-auto mr-4 mb-2">
                    <p class="text-uppercase text-muted">Traffic</p>
                    <h4 class="font-weight-bold float-right">20000</h4>
                  </div>

                  <!-- Content -->
                  <div class="card-body white animated">
                    <div class="progress md-progress">
                      <div class="progress-bar amber darken-3" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted">Worse than last week (75%)</p>
                    <h4 class="text-uppercase font-weight-bold my-4">Details</h4>
                    <p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
                  </div>

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

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4">

              <!-- Card -->
              <div class="card gradient-card">

                  <div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                    <!-- Content -->
                    <a href="#!">
                      <div class="text-white d-flex h-100 mask aqua-gradient-rgba">
                        <div class="first-content align-self-center p-3">
                          <h3 class="card-title">Organic traffic</h3>
                          <p class="lead mb-0">Click on this card to see details</p>
                        </div>
                        <div class="second-content  align-self-center mx-auto text-center">
                          <i class="fa fa-line-chart fa-3x"></i>
                        </div>
                      </div>
                    </a>

                  </div>

                  <!-- Data -->
                  <div class="third-content  ml-auto mr-4 mb-2">
                    <p class="text-uppercase text-muted">Organic traffic</p>
                    <h4 class="font-weight-bold float-right">2000</h4>
                  </div>

                  <!-- Content -->
                  <div class="card-body white">
                    <div class="progress md-progress">
                      <div class="progress-bar cyan lighten-1" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-muted">Better than last week (50%)</p>
                    <h4 class="text-uppercase font-weight-bold my-4">Details</h4>
                    <p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
                  </div>

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

            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

      

Chart card MDB Pro component

Alie Corporation

NYSE: AZHC • Oct 16, 1:45PM

887.32

887.02 (.03%)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

sample image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.



        <!-- Card -->
        <div class="card chart-card">

          <!-- Card content -->
          <div class="card-body pb-0">

            <!-- Title -->
            <h4 class="card-title font-weight-bold">Alie Corporation</h4>
            <!-- Text -->
            <p class="card-text mb-4">NYSE: AZHC  •  Oct 16, 1:45PM</p>
            <div class="d-flex justify-content-between">
              <p class="display-4 align-self-end">887.32</p>
              <p class="align-self-end pb-2">887.02 (.03%)</p>
            </div>

          </div>

          <!-- Classic tabs -->
          <div class="classic-tabs">

            <!-- Nav tabs -->
            <ul class="nav tabs-white nav-fill" role="tablist">
              <li class="nav-item ml-0">
                <a class="nav-link waves-light active" data-toggle="tab" href="#panel1001" role="tab">Profile</a>
              </li>
              <li class="nav-item">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel1002" role="tab">Follow</a>
              </li>
              <li class="nav-item">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel1003" role="tab">Contact</a>
              </li>
            </ul>

            <div class="tab-content rounded-bottom">
              <!--Panel 1-->
              <div class="tab-pane fade in show active" id="panel1001" role="tabpanel">
                <canvas id="lineChart" height="250px"></canvas>
              </div>
              <!--/.Panel 1-->
              <!--Panel 2-->
              <div class="tab-pane fade" id="panel1002" role="tabpanel">
                <p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
              </div>
              <!--/.Panel 2-->
              <!--Panel 3-->
              <div class="tab-pane fade" id="panel1003" role="tabpanel">
                <img class="img-fluid z-depth-1 rounded mb-3" alt="sample image" src="https://mdbootstrap.com/img/Photos/Others/intro1.jpg">
                <p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.</p>
              </div>
              <!--/.Panel 3-->
            </div>

          </div>
          <!-- Classic tabs -->

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

      


        // Line
        var ctxL = document.getElementById("lineChart").getContext('2d');
        var myLineChart = new Chart(ctxL, {
          type: 'line',
          data: {
            labels: ["8 AM", "10 AM", "12 PM", "2 PM", "4 PM", "6 PM", "8 PM"],
            datasets: [
              {
                fill: false,
                borderColor: "#673ab7",
                pointBackgroundColor: "#673ab7",
                data: [885, 884, 887, 883, 888, 889, 888]
              }
            ]
          },
          options: {
            responsive: false,
            legend: {
              display: false
            },
            elements: {
              line: {
                tension: 0.0
              }
            },
            scales: {
              xAxes: [{
                gridLines: {
                  display: false,
                },
                ticks: {
                  padding: 15,
                  height: 30
                }
              }],
              yAxes: [{
                gridLines: {
                  drawBorder: false
                },
                ticks: {
                    maxTicksLimit: 5,
                    padding: 15,
                    min: 880,
                    max: 890
                  }
              }]
            }
          }
        });

      

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