Extended Cards

Bootstrap Extended Cards

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Note: to start working with Extended Cards see the "Getting Started" tab on this page. They require a simple, additional setup.


Promoting card MDB Pro component

avatar

New spicy meals

07/24/2018

Recently, we added several exotic new dishes to our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our 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.webp" 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="far fa-clock 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.webp" 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 our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our 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="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
                <i class="fas 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 km/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="fas fa-sun-o fa-5x pt-3 amber-text"></i>
              </div>
              <div class="d-flex justify-content-between mb-4">
                <p><i class="fas fa-tint fa-lg text-info pr-2"></i>3% Precipitation</p>
                <p><i class="fas fa-leaf fa-lg grey-text pr-2"></i>21 km/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="fas fa-sun 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="fas fa-cloud-sun-rain 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="fas fa-sun 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="fas fa-sun 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="fas 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="fas fa-cloud-sun fa-lg text-info"></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).webp" 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="fas fa-star amber-text"> </i></li>
                <li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
                <li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
                <li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
                <li class="list-inline-item"><i class="fas fa-star-half-alt 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.webp)">
  
                      <!-- 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="far fa-money-bill-alt 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.webp);">
  
                      <!-- 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="fas fa-chart-line 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.webp);">
  
                      <!-- 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="fas fa-chart-pie 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.webp);">
  
                      <!-- 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="fas fa-chart-line 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.webp">
                  <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
                    }
                }]
              }
            }
          });
  
        
        
    

Map card MDB Pro component

Central Park Zoo
A place to relax
25 min

Call

Love

Smile


East 64th Street, New York, NY 10021, US
Closed Opens 10 AM
Sunny weather tomorrow
        
            
  
          <!-- Card -->
          <div class="card map-card">
  
            <!--Google map-->
            <div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">
              <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                style="border:0" allowfullscreen></iframe>
            </div>
  
            <!-- Card content -->
            <div class="card-body closed px-0">
  
              <div class="button px-2 mt-3">
                <a class="btn-floating btn-lg living-coral float-right"><i class="fas fa-bicycle"></i></a>
              </div>
  
              <div class="white px-4 pb-4 pt-3-5">
  
                <!-- Title -->
                <h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>
  
                <div class="d-flex justify-content-between living-coral-text">
                  <h6 class="card-subtitle font-weight-light">A place to relax</h6>
                  <h6 class="font-small font-weight-light mt-n1">25 min</h6>
                </div>
  
                <hr>
  
                <div class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">
                  <div>
                    <i class="fas fa-phone fa-lg mb-3"></i>
                    <p class="mb-0">Call</p>
                  </div>
                  <div>
                    <i class="fas fa-cat fa-lg mb-3"></i>
                    <p class="mb-0">Love</p>
                  </div>
                  <div>
                    <i class="far fa-grin-beam-sweat fa-lg mb-3"></i>
                    <p class="mb-0">Smile</p>
                  </div>
                </div>
  
                <hr>
  
                <table class="table table-borderless">
                  <tbody>
                    <tr>
                      <th scope="row" class="px-0 pb-3 pt-2">
                          <i class="fas fa-map-marker-alt living-coral-text"></i>
                      </th>
                      <td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>
                    </tr>
                    <tr class="mt-2">
                      <th scope="row" class="px-0 pb-3 pt-2">
                        <i class="far fa-clock living-coral-text"></i>
                      </th>
                      <td class="pb-3 pt-2"><span class="deep-purple-text mr-2"> Closed</span> Opens 10 AM</td>
                    </tr>
                    <tr class="mt-2">
                      <th scope="row" class="px-0 pb-3 pt-2">
                        <i class="fas fa-cloud-moon living-coral-text"></i>
                      </th>
                      <td class="pb-3 pt-2">Sunny weather tomorrow</td>
                    </tr>
                  </tbody>
                </table>
  
              </div>
  
            </div>
  
          </div>
          <!-- Card -->
  
        
        
    

Calendar card MDB Pro component

MDB Calendar

  • October
  • 2018
  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • Su
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
My calendars
        
            
  
          <!-- Material form register -->
          <div class="card card-form md-calendar">
  
            <!--Card content-->
            <div class="card-body rounded-top white-text pr-0">
  
              <h3 class="font-weight-bold text-center text-white mt-4 mb-5 pb-3">MDB Calendar</h3>
  
              <div class="my-4">      
                <ul class="list-unstyled d-flex justify-content-between mr-4">
                  <li class="h4">October</li>
                  <li class="text-white-50 mt-2">2018</li>
                </ul>
              </div>
  
              <ul class="list-unstyled weekdays text-white-50">
                <li>Mo</li>
                <li>Tu</li>
                <li>We</li>
                <li>Th</li>
                <li>Fr</li>
                <li>Sa</li>
                <li>Su</li>
              </ul>
              
              <ul class="list-unstyled days">  
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li class="active rounded-left">11</li>
                <li class="active">12</li>
                <li class="active">13</li>
                <li class="active">14</li>
                <li class="active rounded-left">15</li>
                <li class="active">16</li>
                <li class="active">17</li>
                <li class="active">18</li>
                <li class="active">19</li>
                <li class="active">20</li>
                <li class="active">21</li>
                <li class="active">22</li>
                <li class="active">23</li>
                <li class="active">24</li>
                <li class="active rounded-right">25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
                <li>31</li>
              </ul>
  
            </div>
  
            <div class="card card-form-2">
              <div class="card-body">
              
                <h6 class="mt-2 mb-4 font-weight-bold">My calendars</h6>
  
                <!-- Filled-in checkbox -->
                <div class="form-check red-checkbox pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox" checked>
                  <label class="form-check-label" for="filledInCheckbox">Joe Doe</label>
                </div>
  
                <!-- Filled-in checkbox -->
                <div class="form-check purple-checkbox pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox4">
                  <label class="form-check-label" for="filledInCheckbox4">Company calendar</label>
                </div>
  
                <!-- Filled-in checkbox -->
                <div class="form-check blue-checkbox pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox1" checked>
                  <label class="form-check-label" for="filledInCheckbox1">To-Do list</label>
                </div>
  
                <!-- Filled-in checkbox -->
                <div class="form-check teal-checkbox pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox2" checked>
                  <label class="form-check-label" for="filledInCheckbox2">Reminders</label>
                </div>
  
                <!-- Filled-in checkbox -->
                <div class="form-check unique-checkbox pl-0">
                  <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox3">
                  <label class="form-check-label" for="filledInCheckbox3">Birthday</label>
                </div>
        
              </div>
  
            </div>
  
          </div>
          <!-- Material form register -->
  
        
        
    

Panels card MDB Pro component

15°

12:15 PM


San Francisco

Cloudy

23°

3:25 PM


New York City

Sunny

10°

10:30 AM


Seattle

Light rain

14°

8:10 PM


Milwaukee

Cloudy

25°

1:35 PM


Honolulu

Sunny

7:00 AM


Anchorage

Heavy rain

        
            
  
          <div class="card panels-card">
    
            <div class="rounded-top grey lighten-2 dark-grey-text">
              <ul class="list-inline float-right my-0 py-1 pr-3">
                <li class="list-inline-item">
                  <i class="fab fa-facebook" aria-hidden="true"></i>
                </li>
                <li class="list-inline-item">
                  <i class="fab fa-twitter" aria-hidden="true"></i>
                </li>
                <li class="list-inline-item">
                  <i class="fab fa-instagram" aria-hidden="true"></i>
                </li>
              </ul>
            </div>
  
            <!--Navbar-->
            <nav class="navbar navbar-expand-lg navbar-dark grey lighten-5 d-flex justify-content-between z-depth-1-bottom">
  
                <div>
                  <ul class="list-inline my-2 py-1 dark-grey-text">
                    <li class="list-inline-item">
                      <i class="fas fa-bars" aria-hidden="true"></i>
                    </li>
                    <li class="list-inline-item font-weight-bold text-uppercase">
                      weather
                    </li>
                  </ul>
                </div>
  
                <div>
                  <ul class="list-inline my-2 py-1 dark-grey-text">
                    <li class="list-inline-item">
                      <i class="fas fa-search" aria-hidden="true"></i>
                      <i class="fas fa-ellipsis-v pl-3" aria-hidden="true"></i>
                    </li>
                  </ul>
                </div>
  
            </nav>
            <!--/.Navbar-->
  
            <div class="card-body grey lighten-5 rounded-bottom">
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card grey lighten-2">
                    <div class="card-body pb-0">
                      <i class="fas fa-cloud fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">15&deg;</p>
                        <p class="mb-0 hour">12:15 PM</p>
                      </div>
                    </div>
                    <hr>
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">San Francisco</h6>
                      <p class="mb-0">Cloudy</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card orange lighten-3">
                    <div class="card-body pb-0">
                      <i class="fas fa-sun fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">23&deg;</p>
                        <p class="mb-0 hour">3:25 PM</p>
                      </div>
                    </div>
                    <hr>
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">New York City</h6>
                      <p class="mb-0">Sunny</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
              </div>
              <!-- Grid row -->
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card indigo lighten-3">
                    <div class="card-body pb-0">
                      <i class="fas fa-tint fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">10&deg;</p>
                        <p class="mb-0 hour">10:30 AM</p>
                      </div>
                    </div>
                    <hr>
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">Seattle</h6>
                      <p class="mb-0">Light rain</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card grey lighten-2">
                    <div class="card-body pb-0">
                      <i class="fas fa-cloud fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">14&deg;</p>
                        <p class="mb-0 hour">8:10 PM</p>
                      </div>
                    </div>
                    <hr>
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">Milwaukee</h6>
                      <p class="mb-0">Cloudy</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
              </div>
              <!-- Grid row -->
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card orange lighten-3">
                    <div class="card-body pb-0">
                      <i class="fas fa-sun fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">25&deg;</p>
                        <p class="mb-0 hour">1:35 PM</p>
                      </div>
                    </div>
                    <hr>
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">Honolulu</h6>
                      <p class="mb-0">Sunny</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-6 p-1">
  
                  <div class="card indigo white-text">
                    <div class="card-body pb-0">
                      <i class="fas fa-umbrella fa-3x pb-4"></i>
                      <div class="d-flex justify-content-between">
                        <p class="mb-0 h5">5&deg;</p>
                        <p class="mb-0 hour">7:00 AM</p>
                      </div>
                    </div>
                    <hr class="hr-light">
                    <div class="card-body pt-0">
                      <h6 class="font-weight-bold mb-1">Anchorage</h6>
                      <p class="mb-0">Heavy rain</p>
                    </div>
                  </div>
  
                </div>
                <!-- Grid column -->
  
              </div>
              <!-- Grid row -->
  
            </div>
            
          </div>
  
        
        
    

Cards package MDB Pro component

Here you can see some of our beautiful cards. You can create your own card collage with any panels and cards you wish.

Cards Package

Fine Art Pictures Gallery

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


Opening hours

  • Tuesday - Friday
  • 10:00AM
  • 6:00PM
  • Saturday - Sunday
  • 9:00AM
  • 7:00PM
  • Monday
  • CLOSED
Central Park Zoo
A place to relax
25 min

Call

Love

Smile


East 64th Street, New York, NY 10021, US
Closed Opens 10 AM
Sunny weather tomorrow
Marketing

This is the card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

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.

woman avatar

Martha Smith


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

Sign up

At least 8 characters and 1 digit

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.

SUBSCRIPTIONS

200

Worse than last week (25%)

avatar

New spicy meals

07/24/2018

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

Learn Bootstrap 4 with MDB

The most comprehensive tutorial for Bootstrap 4. Loved by over 500 000 users. Video and written versions available.

Start free tutorial

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

MDB

Painting

123

Design

98

Technology

165

Building

74

Indie Funk

Generation Funk

19,99 $

Image with a photo of clouds.
Sample avatar image.

Photography

Hello World!

Click here to rotate

About me


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?


Click here to rotate back
        
            
  
          <!-- Card package -->
          <div class="card-columns">
  
            <!-- Booking card -->
            <div class="card booking-card mt-2 mb-4">
      
              <!-- Card image -->
              <div class="view overlay">
                <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/water-lily.webp" 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>Fine Art Pictures Gallery</a></h4>
                <!-- Data -->
                <ul class="list-unstyled list-inline rating">
                  <li class="list-inline-item mr-0"><i class="fa fa-star"> </i></li>
                  <li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
                  <li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
                  <li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
                  <li class="list-inline-item"><i class="fa fa-star-half-alt"></i></li>
                </ul>
                <!-- 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="h5 font-weight-bold mb-4">Opening hours</p>
                <ul class="list-unstyled d-flex justify-content-start mb-0">
                  <li>Tuesday - Friday</li>
                  <li>
                    <div class="chip ml-3">10:00AM</div>
                  </li>
                  <li>
                    <div class="chip ml-0 mr-0">6:00PM</div>
                  </li>
                </ul>
                <ul class="list-unstyled d-flex justify-content-start mb-0">
                  <li>Saturday - Sunday</li>
                  <li>
                    <div class="chip ml-3">9:00AM</div>
                  </li>
                  <li>
                    <div class="chip ml-0 mr-0">7:00PM</div>
                  </li>
                </ul>
                <ul class="list-unstyled d-flex justify-content-start mb-0">
                  <li>Monday</li>
                  <li>
                    <div class="chip ml-3">CLOSED</div>
                  </li>
                </ul>
              </div>
      
            </div>
            <!-- Booking card -->
      
            <!-- Card -->
            <div class="card map-card mb-4">
      
              <!--Google map-->
              <div id="map-container-google-1" class="map-container" style="height: 500px">
                <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                  style="border:0" allowfullscreen></iframe>
              </div>
            
              <!-- Card content -->
              <div class="card-body closed px-0">
            
                <div class="button px-2 mt-3">
                  <a class="btn-floating btn-lg living-coral float-right"><i class="fas fa-bicycle"></i></a>
                </div>
            
                <div class="white px-4 pb-4 pt-3-5">
            
                  <!-- Title -->
                  <h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>
            
                  <div class="d-flex justify-content-between living-coral-text">
                    <h6 class="card-subtitle font-weight-light">A place to relax</h6>
                    <h6 class="font-small font-weight-light mt-n1">25 min</h6>
                  </div>
            
                  <hr>
            
                  <div class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">
                    <div>
                      <i class="fas fa-phone fa-lg mb-3"></i>
                      <p class="mb-0">Call</p>
                    </div>
                    <div>
                      <i class="fas fa-cat fa-lg mb-3"></i>
                      <p class="mb-0">Love</p>
                    </div>
                    <div>
                      <i class="far fa-grin-beam-sweat fa-lg mb-3"></i>
                      <p class="mb-0">Smile</p>
                    </div>
                  </div>
            
                  <hr>
            
                  <table class="table table-borderless">
                    <tbody>
                      <tr>
                        <th scope="row" class="px-0 pb-3 pt-2">
                            <i class="fas fa-map-marker-alt living-coral-text"></i>
                        </th>
                        <td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>
                      </tr>
                      <tr class="mt-2">
                        <th scope="row" class="px-0 pb-3 pt-2">
                          <i class="far fa-clock living-coral-text"></i>
                        </th>
                        <td class="pb-3 pt-2"><span class="deep-purple-text mr-2"> Closed</span> Opens 10 AM</td>
                      </tr>
                      <tr class="mt-2">
                        <th scope="row" class="px-0 pb-3 pt-2">
                          <i class="fas fa-cloud-moon living-coral-text"></i>
                        </th>
                        <td class="pb-3 pt-2">Sunny weather tommorow</td>
                      </tr>
                    </tbody>
                  </table>
            
                </div>
            
              </div>
            
            </div>
            <!-- Card -->
      
            <!-- Image overlay card -->
            <div class="card card-image mb-4" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
      
              <!-- Content -->
              <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                  <h5 class="pink-text"><i class="fas fa-chart-pie"></i> Marketing</h5>
                  <h3 class="card-title pt-2"><strong>This is the card title</strong></h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                    Odit sed qui, dolorum!.</p>
                  <a class="btn btn-pink"><i class="fas fa-clone left"></i> View project</a>
                </div>
              </div>
      
            </div>
            <!-- Image overlay card -->
      
            <!-- 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="lineChart1" 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.webp">
                    <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 -->
      
            <!--Card-->
            <div class="card testimonial-card mt-2 mb-3">
      
              <!-- Background color -->
              <div class="card-up aqua-gradient"></div>
      
              <!-- Avatar -->
              <div class="avatar mx-auto white">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.webp" class="rounded-circle img-responsive" alt="woman avatar">
              </div>
      
              <!-- Content -->
              <div class="card-body">
                <!-- Name -->
                <h4 class="card-title font-weight-bold">Martha Smith</h4>
                <hr>
                <!-- Quotation -->
                <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
                  adipisci</p>
              </div>
      
            </div>
            <!--Card-->
      
            <!-- Material form register -->
            <div class="card card-form mt-2 mb-4">
      
                <!--Card content-->
                <div class="card-body rounded-top pink darken-4">
      
                    <h3 class="font-weight-bold text-center text-uppercase text-white mt-4">Sign up</h3>
      
                    <!-- Form -->
                    <form class="pb-3 px-2">
      
                        <!-- First name -->
                        <div class="md-form">
                            <i class="far fa-user prefix text-white"></i>
                            <input type="text" id="materialRegisterFormFirstName" class="form-control text-white">
                            <label class="text-white" for="materialRegisterFormFirstName">First name</label>
                        </div>
                        <!-- Last name -->
                        <div class="md-form">
                            <i class="far fa-hand-point-right prefix text-white"></i>
                            <input type="email" id="materialRegisterFormLastName" class="form-control text-white">
                            <label class="text-white" for="materialRegisterFormLastName">Last name</label>
                        </div>
      
                        <!-- E-mail -->
                        <div class="md-form mt-0">
                            <i class="far fa-envelope prefix text-white"></i>
                            <input type="email" id="materialRegisterFormEmail" class="form-control text-white">
                            <label class="text-white" for="materialRegisterFormEmail">E-mail</label>
                        </div>
      
                        <!-- Password -->
                        <div class="md-form">
                            <i class="far fa-star prefix text-white"></i>
                            <input type="password" id="materialRegisterFormPassword" class="form-control text-white" aria-describedby="materialRegisterFormPasswordHelpBlock">
                            <label class="text-white" for="materialRegisterFormPassword">Password</label>
                            <small id="materialRegisterFormPasswordHelpBlock" class="form-text text-white">
                                At least 8 characters and 1 digit
                            </small>
                        </div>
      
                    </form>
                    <!-- Form -->
      
                </div>
      
                <div class="card card-form-2 mb-0 z-depth-0">
                  <div class="card-body">
      
                    <!-- Form -->
                    <form class="text-center">
      
                      <!-- Newsletter -->
                      <div class="form-check my-3">
                          <input type="checkbox" class="form-check-input filled-in" id="materialRegisterFormNewsletter">
                          <label class="form-check-label" for="materialRegisterFormNewsletter">Subscribe to our newsletter</label>
                      </div>
      
                      <!-- Sign up button -->
                      <button class="btn btn-outline-red-accent btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign in</button>
      
                      <!-- Social register -->
                      <p>or sign up with:</p>
      
                      <i class="fab fa-lg fa-facebook-f pink-accent-text px-2"></i>
                      <i class="fab fa-lg fa-twitter pink-accent-text px-2"></i>
                      <i class="fab fa-lg fa-linkedin-in pink-accent-text px-2"></i>
                      <i class="fab fa-lg fa-github pink-accent-text px-2"></i>
      
                      <hr>
      
                      <!-- Terms of service -->
                      <p>By clicking
                          <em>Sign up</em> you agree to our
                          <a class="pink-accent-text" href="#!" target="_blank">terms of service</a> and
                          <a class="pink-accent-text" href="#!" target="_blank">terms of service</a>. </p>
      
                    </form>
                    <!-- Form -->
      
                  </div>
                </div>
      
            </div>
            <!-- Material form register -->
      
            <!-- Panel -->
            <div class="card mimosa mb-4 white-text">
              <div class="card-body">
                <div class="pull-right">
                  <i class="fas fa-chart-line"></i>
                </div>
                <p>SUBSCRIPTIONS</p>
                <h4>200</h4>
              </div>
              <div class="progress md-progress">
                <div class="progress-bar bg grey darken-3" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="card-body">
                <p class="mb-0">Worse than last week (25%)</p>
              </div>
            </div>
            <!-- Panel -->
      
            <!-- Card -->
            <div class="card promoting-card mb-4">
      
              <!-- Card content -->
              <div class="card-body d-flex flex-row">
            
                <!-- Avatar -->
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.webp" 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="far fa-clock 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.webp" 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 our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our 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="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
                  <i class="fas 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 -->
      
            <!-- Jumbotron -->
            <div class="card blue-gradient py-2" id="intro">
      
              <!-- Content -->
              <div class="card-body text-white text-center">
      
                <h2 class="mb-4 font-weight-bold">
                  Learn Bootstrap 4 with MDB
                </h2>
                <p class="mb-4">
                  <strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written
                    versions available.</strong>
                </p>
                <a target="_blank" href="/education/bootstrap/" class="btn btn-outline-white btn-rounded">Start
                  free tutorial
                  <i class="fas fa-graduation-cap ml-2"></i>
                </a>
      
              </div>
              <!-- Content -->
      
            </div>
            <!-- Jumbotron -->
      
            <!-- Card Wider -->
            <div class="card card-cascade wider mt-2 mb-3">
      
              <!-- Card image -->
              <div class="view view-cascade overlay">
                <img  class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo6.webp" alt="Card image cap">
                <a href="#!">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
      
              <!-- Card content -->
              <div class="card-body card-body-cascade text-center">
      
                <!-- Title -->
                <h4 class="card-title"><strong>Alison Belmont</strong></h4>
                <!-- Subtitle -->
                <h5 class="blue-text pb-2"><strong>Graffiti Artist</strong></h5>
                <!-- Text -->
                <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
      
                <!-- Linkedin -->
                <a class="px-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a>
                <!-- Twitter -->
                <a class="px-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a>
                <!-- Dribbble -->
                <a class="px-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a>
      
              </div>
      
            </div>
            <!-- Card Wider -->
      
            <!-- Blue card -->
            <div class="card colorful-card indigo accent-4 mt-2 mb-4">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div>
                    <!-- Title -->
                    <h2 class="card-title h1 font-weight-bold text-white">
                    <i class="fas fa-code font-weight-bold pink-text"></i> MDB</h2>
                  </div>
                  <i class="fas fa-user fa-lg text-white mt-2"></i>
                </div>
                <!-- Grid row -->
                <div class="row mt-4">
      
                  <!-- Grid column -->
                  <div class="col-md-6 mb-4">
      
                    <!-- Card -->
                    <div class="card testimonial-card">
      
                        <!-- Background color -->
                        <div class="card-up indigo lighten-1">
                          <img src="https://mdbootstrap.com/img/Photos/Others/photo2.webp" class="img-fluid">
                        </div>
      
                        <!-- Avatar -->
                        <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.webp" class="rounded-circle card-img-64">
                        </div>
      
                        <div class="card-body">
                            <!-- Name -->
                            <h6 class="text-uppercase indigo-accent-text pb-2">Painting</h6>
                            <p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>123</p>
                        </div>
      
                    </div>
                    <!-- Card -->
      
                  </div>
                  <!-- Grid column -->
      
                  <!-- Grid column -->
                  <div class="col-md-6 mb-4">
      
                    <!-- Card -->
                    <div class="card testimonial-card">
      
                        <!-- Background color -->
                        <div class="card-up indigo lighten-1">
                          <img src="https://mdbootstrap.com/img/Photos/Others/photo9.webp" class="img-fluid">
                        </div>
      
                        <!-- Avatar -->
                        <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp" class="rounded-circle card-img-64">
                        </div>
      
                        <div class="card-body">
                            <!-- Name -->
                            <h6 class="text-uppercase indigo-accent-text pb-2">Design</h6>
                            <p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>98</p>
                        </div>
      
                    </div>
                    <!-- Card -->
      
                  </div>
                  <!-- Grid column -->
      
                </div>
                <!-- Grid row -->
      
                <!-- Grid row -->
                <div class="row">
      
                  <!-- Grid column -->
                  <div class="col-md-6 mb-4">
      
                    <!-- Card -->
                    <div class="card testimonial-card">
      
                        <!-- Background color -->
                        <div class="card-up indigo lighten-1">
                          <img src="https://mdbootstrap.com/img/Photos/Others/img (45).webp" class="img-fluid">
                        </div>
      
                        <!-- Avatar -->
                        <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp" class="rounded-circle card-img-64">
                        </div>
      
                        <div class="card-body">
                            <!-- Name -->
                            <h6 class="text-uppercase indigo-accent-text pb-2">Technology</h6>
                            <p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>165</p>
                        </div>
      
                    </div>
                    <!-- Card -->
      
                  </div>
                  <!-- Grid column -->
      
                  <!-- Grid column -->
                  <div class="col-md-6 mb-4">
      
                    <!-- Card -->
                    <div class="card testimonial-card">
      
                        <!-- Background color -->
                        <div class="card-up indigo lighten-1">
                          <img src="https://mdbootstrap.com/img/Photos/Others/photo7.webp" class="img-fluid">
                        </div>
      
                        <!-- Avatar -->
                        <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).webp" class="rounded-circle card-img-64">
                        </div>
      
                        <div class="card-body">
                            <!-- Name -->
                            <h6 class="text-uppercase indigo-accent-text pb-2">Building</h6>
                            <p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>74</p>
                        </div>
      
                    </div>
                    <!-- Card -->
      
                  </div>
                  <!-- Grid column -->
      
                </div>
                <!-- Grid row -->
                <div class="d-flex justify-content-between my-3">
                  <i class="fas fa-cogs fa-lg text-white pl-5" aria-hidden="true"></i>
                  <i class="fas fa-heart fa-lg yellow-darken-text" aria-hidden="true"></i>
                  <i class="fas fa-search fa-lg text-white pr-5" aria-hidden="true"></i>
                </div>
              </div>
            </div>
            <!-- Blue card -->
      
            <div class="card mb-4">
              <div class="view overlay">
                <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(6).webp" alt="Card image cap">
                <a href="#!">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <div class="card-body p-3">
                <h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Indie Funk</h5>
                <p class="aqua-sky-text mb-0">Generation Funk</p>
                <ul class="list-unstyled list-inline my-2">
                  <li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
                  <li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
                  <li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
                  <li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
                  <li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
                </ul>
                <p class="chili-pepper-text mb-0">19,99 $</p>
              </div>
            </div>
      
            <!-- Rotating card -->
            <div class="card-wrapper card-action">
              <div id="card-1" class="card card-rotating text-center">
      
                <!-- Front Side -->
                <div class="face front">
      
                  <!-- Image-->
                  <div class="card-up">
                    <img  class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/18.webp" alt="Image with a photo of clouds.">
                  </div>
      
                  <!-- Avatar -->
                  <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).webp" class="rounded-circle" alt="Sample avatar image.">
                  </div>
      
                  <!-- Content -->
                  <div class="card-body">
                    <p class="font-weight-bold text-uppercase pink-text mb-3">Photography</p>
                    <h3 class="font-weight-bold mb-3 pb-1">Hello World!</h3>
                    <!-- Triggering button -->
                    <a class="rotate-btn btn-floating btn-pink" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>
                  </div>
                </div>
                <!-- Front Side -->
      
                <!-- Back Side -->
                <div class="face back">
                  <div class="card-body">
      
                    <!-- Content -->
                    <h4 class="font-weight-bold">About me</h4>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
                    </p>
                    <hr>
                    <!-- Social Icons -->
                    <ul class="list-inline py-2">
                      <li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-facebook-f"></i></a></li>
                      <li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-twitter"></i></a></li>
                      <li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-google-plus-g"></i></a></li>
                      <li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                    <!-- Triggering button -->
                    <a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate back</a>
      
                  </div>
                </div>
                <!-- Back Side -->
      
              </div>
            </div>
            <!-- Rotating card -->
      
          </div>
          <!-- Card package -->
  
        
        
    
        
            
  
            .heading {
              font-weight: 700;
              color: #5d4267;
            }
            .card.colorful-card .testimonial-card .card-up {
              height: 95px;
            }
            .card.colorful-card .testimonial-card .avatar {
              border: 3px solid #fff !important;
            }
            .card.booking-card {
              background-color: #c7f2e3;
            }
            .card.booking-card .fa {
              color: #f7aa00;
            }
            .card.booking-card .card-body .card-text {
              color: #db2d43;
            }
            .card.card.booking-card .chip {
              background-color: #87e5da;
            }
            .card.booking-card .card-body hr {
              border-top: 1px solid #f7aa00;
            }
            .mimosa {
              background-color: #F0C05A;
            }
            .fuchsia-rose-text {
              color: #db0075;
            }
            .aqua-sky-text {
              color: #5cc6c3;
            }
            .mimosa-text {
              color: #F0C05A;
            }
            .list-inline-item .fas, .list-inline-item .far {
              font-size: .8rem;
            }
            .chili-pepper-text {
              color: #9B1B30;
            }
            .collapse-content .fa.fa-heart:hover {
              color: #f44336 !important;
            }
            .collapse-content .fa.fa-share-alt:hover {
              color: #0d47a1 !important;
            }
            .card-wrapper.card-action {
              min-height: 400px;
            }
  
        
        
    
        
            
  
            var ctxL = document.getElementById("lineChart1").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
                    }
                  }]
                }
              }
            });
  
        
        
    

Bootstrap extended cards - getting started : download & setup


Download

All of these free components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the latest Bootstrap 4.

Click on the button below to go to the Download Page, where you can download the 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

Extended Cards Setup

After downloading and extracting MDB package, open the index.html file.

Then, below the linked CSS files add this Extended Cards code.


<!-- MDBootstrap Cards Extended Pro  -->
<link href="css/addons-pro/cards-extended.min.css" rel="stylesheet">
  

Note: Extended cards do NOT require additional JavaScript files.

If you need additional help, have a look at the video tutorial below.

Note: The tutorial below refers to another addon (Steppers) but the procedure is exactly the same for the Extended Cards addon.


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 the size of the 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, please 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