Edit these docs

E-commerce components

Bootstrap E-commerce components

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap e-commerce components are a set of components that are necessary to build online stores or any other e-commerce business.

Product card v.1 MDB Pro component

Card image with a picture of shoes
Shoes

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 


        <!--Card-->
        <div class="card card-cascade card-ecommerce wider">

          <!--Card image-->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(2).webp"
              alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <div class="card-body card-body-cascade text-center">
            <!--Category & Title-->
            <h5>Shoes</h5>
            <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

            <!--Description-->
            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
              eveniet ut et voluptates.</p>

            <!--Card footer-->
            <div class="card-footer">
              <span class="float-left">49$</span>
              <span class="float-right">
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fas fa-share-alt mr-3"></i></a>
                <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fas fa-heart"></i></a>
              </span>
            </div>

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

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

Product card v.2 MDB Pro component

Card image with a picture of dance class.
Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 


        <!--Card-->
        <div class="card card-cascade card-ecommerce narrower">

          <!--Card image-->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(5).webp"
              alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <div class="card-body card-body-cascade text-center">
            <!--Category & Title-->
            <h5>Category</h5>
            <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

            <!--Description-->
            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
              eveniet ut et voluptates.
            </p>

            <!--Card footer-->
            <div class="card-footer">
              <span class="float-left">49$</span>
              <span class="float-right">
                <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fas fa-eye mr-3"></i></a>
                <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fas fa-heart"></i></a>
              </span>
            </div>

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

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

Product card v.3 MDB Pro component

Card image with a picture of a black belt.
Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 199$ 


        <!--Card-->
        <div class="card card-cascade card-ecommerce">

          <!--Card image-->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.webp"
              alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <div class="card-body card-body-cascade text-center">
            <!--Category & Title-->
            <h5>Category</h5>
            <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

            <!--Description-->
            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
              eveniet ut et voluptates.
            </p>

            <!--Card footer-->
            <div class="card-footer">
              <span class="float-left">49$ <span class="discount">199$</span></span>
              <span class="float-right"><a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i
                    class="fas fa-heart"></i></a></span>
            </div>

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

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

Product card v.4 MDB Pro component

Card image with a picture of casual outfit.
Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 


        <!--Card-->
        <div class="card card-cascade card-ecommerce wider">

          <!--Card image-->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(4).webp"
              alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <div class="card-body card-body-cascade text-center">
            <!--Category & Title-->
            <h5>Category</h5>
            <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

            <!--Rating-->
            <ul class="rating">
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="far fa-star"></i></li>
            </ul>

            <!--Description-->
            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
              eveniet ut et voluptates.
            </p>

            <!--Card footer-->
            <div class="card-footer">
              <span class="float-left">49$</span>
              <span class="float-right">
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fas fa-share-alt mr-3"></i></a>
                <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fas fa-heart"></i></a>
              </span>
            </div>

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

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

Product card v.5 MDB Pro component

Example photo
Shoes

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

49$ 


        <!--Card-->
        <div class="card card-cascade card-ecommerce wider">

          <!--Card image-->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).webp"
              alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <!--/.Card image-->

          <!--Card content-->
          <div class="card-body card-body-cascade text-center">
            <!--Category & Title-->
            <h5>Shoes</h5>
            <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

            <!--Rating-->
            <ul class="rating">
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="far fa-star"></i></li>
            </ul>

            <!--Description-->
            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
              eveniet ut et voluptates.
            </p>

            <!--Card footer-->
            <div class="card-footer">
              <span class="float-left">49$</span>
              <span class="float-right">
                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fas fa-shopping-cart mr-3"></i></a>
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fas fa-share-alt mr-3"></i></a>
                <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fas fa-heart"></i></a>
              </span>
            </div>

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

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

Collection cards MDB Pro component

Example photo

Title 



        <!--Collection card-->
        <div class="card collection-card">
          <!--Card image-->
          <div class="view zoom">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).webp"
              alt="">
            <div class="stripe light">
              <a>
                <p>Title <i class="fas fa-chevron-right"></i></p>
              </a>
            </div>
          </div>
          <!--/.Card image-->
        </div>
        <!--/.Collection card-->

Dark version

Example photo

Title 



        <!--Collection card-->
        <div class="card collection-card" style="width: 20rem;">
          <!--Card image-->
          <div class="view zoom">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).webp"
              alt="Example photo">
            <div class="stripe dark">
              <a>
                <p>Title <i class="fas fa-chevron-right"></i></p>
              </a>
            </div>
          </div>
          <!--/.Card image-->
        </div>
        <!--/.Collection card-->

Shopping Cart Table MDB Pro component

Product Color Price QTY Amount
iPhone

Apple

 White $800 $800
Headphones

Sony

 Red $200 $600
iPad Pro

Apple

 Gold $600 $1200

Total

$2600 



        <div class="card">
          <div class="card-body">

            <!-- Shopping Cart table -->
            <div class="table-responsive">

              <table class="table product-table">

                <!-- Table head -->
                <thead class="mdb-color lighten-5">
                  <tr>
                    <th></th>
                    <th class="font-weight-bold">
                      <strong>Product</strong>
                    </th>
                    <th class="font-weight-bold">
                      <strong>Color</strong>
                    </th>
                    <th></th>
                    <th class="font-weight-bold">
                      <strong>Price</strong>
                    </th>
                    <th class="font-weight-bold">
                      <strong>QTY</strong>
                    </th>
                    <th class="font-weight-bold">
                      <strong>Amount</strong>
                    </th>
                    <th></th>
                  </tr>
                </thead>
                <!-- /.Table head -->

                <!-- Table body -->
                <tbody>

                  <!-- First row -->
                  <tr>
                    <th scope="row">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.webp" alt="" class="img-fluid z-depth-0">
                    </th>
                    <td>
                      <h5 class="mt-3">
                        <strong>iPhone</strong>
                      </h5>
                      <p class="text-muted">Apple</p>
                    </td>
                    <td>White</td>
                    <td></td>
                    <td>$800</td>
                    <td>
                      <input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
                    </td>
                    <td class="font-weight-bold">
                      <strong>$800</strong>
                    </td>
                    <td>
                      <button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top"
                        title="Remove item">X
                      </button>
                    </td>
                  </tr>
                  <!-- /.First row -->

                  <!-- Second row -->
                  <tr>
                    <th scope="row">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.webp" alt="" class="img-fluid z-depth-0">
                    </th>
                    <td>
                      <h5 class="mt-3">
                        <strong>Headphones</strong>
                      </h5>
                      <p class="text-muted">Sony</p>
                    </td>
                    <td>Red</td>
                    <td></td>
                    <td>$200</td>
                    <td>
                      <input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
                    </td>
                    <td class="font-weight-bold">
                      <strong>$600</strong>
                    </td>
                    <td>
                      <button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top"
                        title="Remove item">X
                      </button>
                    </td>
                  </tr>
                  <!-- /.Second row -->

                  <!-- Third row -->
                  <tr>
                    <th scope="row">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/1.webp" alt="" class="img-fluid z-depth-0">
                    </th>
                    <td>
                      <h5 class="mt-3">
                        <strong>iPad Pro</strong>
                      </h5>
                      <p class="text-muted">Apple</p>
                    </td>
                    <td>Gold</td>
                    <td></td>
                    <td>$600</td>
                    <td>
                      <input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
                    </td>
                    <td class="font-weight-bold">
                      <strong>$1200</strong>
                    </td>
                    <td>
                      <button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top"
                        title="Remove item">X
                      </button>
                    </td>
                  </tr>
                  <!-- /.Third row -->

                  <!-- Fourth row -->
                  <tr>
                    <td colspan="3"></td>
                    <td>
                      <h4 class="mt-2">
                        <strong>Total</strong>
                      </h4>
                    </td>
                    <td class="text-right">
                      <h4 class="mt-2">
                        <strong>$2600</strong>
                      </h4>
                    </td>
                    <td colspan="3" class="text-right">
                      <button type="button" class="btn btn-primary btn-rounded">Complete purchase
                        <i class="fas fa-angle-right right"></i>
                      </button>
                    </td>
                  </tr>
                  <!-- Fourth row -->

                </tbody>
                <!-- /.Table body -->

              </table>

            </div>
            <!-- /.Shopping Cart table -->

          </div>

        </div>

Checkout panel MDB Pro component

@
Please select a valid country.
Please provide a valid state.
Zip code required.
Second sample image
Additional premium support

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.

Second sample image
MDB Membership

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.

Full name as displayed on card
Name on card is required
Credit card number is required
Expiration date required
Security code required

Summary

MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects
$ 2000
Premium support - 2 years
$ 2000
MDB Membership - 2 years
$ 2000
Total
$ 2000 


        <div class="card">
          <div class="card-body">

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

              <!--Grid column-->
              <div class="col-lg-8 mb-4">

                <!-- Pills navs -->
                <ul class="nav md-pills nav-justified pills-primary font-weight-bold">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tabCheckoutBilling123" role="tab">1. Billing</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tabCheckoutAddons123" role="tab">2. Addons</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tabCheckoutPayment123" role="tab">3. Payment</a>
                  </li>
                </ul>

                <!-- Pills panels -->
                <div class="tab-content pt-4">

                  <!--Panel 1-->
                  <div class="tab-pane fade in show active" id="tabCheckoutBilling123" role="tabpanel">

                    <!--Card content-->
                    <form>

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

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

                          <!--firstName-->
                          <label for="firstName" class="">First name</label>
                          <input type="text" id="firstName" class="form-control">

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

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

                          <!--lastName-->
                          <label for="lastName" class="">Last name</label>
                          <input type="text" id="lastName" class="form-control">

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

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

                      <!--Username-->
                      <div class="input-group mb-4">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="basic-addon1">@</span>
                        </div>
                        <input type="text" class="form-control py-0" placeholder="Username" aria-describedby="basic-addon1">
                      </div>

                      <!--email-->
                      <label for="email" class="">Email (optional)</label>
                      <input type="text" id="email" class="form-control mb-4" placeholder="youremail@example.com">

                      <!--address-->
                      <label for="address" class="">Address</label>
                      <input type="text" id="address" class="form-control mb-4" placeholder="1234 Main St">

                      <!--address-2-->
                      <label for="address-2" class="">Address 2 (optional)</label>
                      <input type="text" id="address-2" class="form-control mb-4" placeholder="Apartment or suite">

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

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

                          <label for="country">Country</label>
                          <select class="custom-select d-block w-100" id="country" required>
                            <option value="">Choose...</option>
                            <option>United States</option>
                          </select>
                          <div class="invalid-feedback">
                            Please select a valid country.
                          </div>

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

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

                          <label for="state">State</label>
                          <select class="custom-select d-block w-100" id="state" required>
                            <option value="">Choose...</option>
                            <option>California</option>
                          </select>
                          <div class="invalid-feedback">
                            Please provide a valid state.
                          </div>

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

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

                          <label for="zip">Zip</label>
                          <input type="text" class="form-control" id="zip" placeholder="" required>
                          <div class="invalid-feedback">
                            Zip code required.
                          </div>

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

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

                      <hr>

                      <div class="mb-1">
                        <input type="checkbox" class="form-check-input filled-in" id="chekboxRules">
                        <label class="form-check-label" for="chekboxRules">I accept the terms and conditions</label>
                      </div>
                      <div class="mb-1">
                        <input type="checkbox" class="form-check-input filled-in" id="safeTheInfo">
                        <label class="form-check-label" for="safeTheInfo">Save this information for next time</label>
                      </div>
                      <div class="mb-1">
                        <input type="checkbox" class="form-check-input filled-in" id="subscribeNewsletter">
                        <label class="form-check-label" for="subscribeNewsletter">Subscribe to our newsletter</label>
                      </div>

                      <hr>

                      <button class="btn btn-primary btn-lg btn-block" type="submit">Next step</button>

                    </form>

                  </div>
                  <!--/.Panel 1-->

                  <!--Panel 2-->
                  <div class="tab-pane fade" id="tabCheckoutAddons123" role="tabpanel">

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

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

                        <img src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" class="img-fluid z-depth-1-half"
                          alt="Second sample image">

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

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

                        <h5 class="mb-3 h5">Additional premium support</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,
                          dolorem.</p>

                        <!--Name-->
                        <select class="mdb-select colorful-select dropdown-info">
                          <option value="" disabled>Choose a period of time</option>
                          <option value="1" selected>+6 months : 200$</option>
                          <option value="2">+12 months: 400$</option>
                          <option value="3">+18 months: 800$</option>
                          <option value="4">+24 months: 1200$</option>
                        </select>

                        <button type="button" class="btn btn-primary btn-md">Add premium support to the cart</button>

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

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

                    <hr class="mb-5">

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

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

                        <img src="https://mdbootstrap.com/img/Photos/Others/images/44.webp" class="img-fluid z-depth-1-half"
                          alt="Second sample image">

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

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

                        <h5 class="mb-3 h5">MDB Membership</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,
                          dolorem.</p>

                        <!--Name-->
                        <select class="mdb-select colorful-select dropdown-info">
                          <option value="" disabled>Choose a period of time</option>
                          <option value="1" selected>+6 months : 200$</option>
                          <option value="2">+12 months: 400$</option>
                          <option value="3">+18 months: 800$</option>
                          <option value="4">+24 months: 1200$</option>
                        </select>

                        <button type="button" class="btn btn-primary btn-md">Add MDB Membership to the cart</button>

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

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

                    <hr class="mb-4">

                    <button class="btn btn-primary btn-lg btn-block" type="submit">Next step</button>

                  </div>
                  <!--/.Panel 2-->

                  <!--Panel 3-->
                  <div class="tab-pane fade" id="tabCheckoutPayment123" role="tabpanel">

                    <div class="d-block my-3">
                      <div class="mb-2">
                        <input name="group2" type="radio" class="form-check-input with-gap" id="radioWithGap4" checked
                          required>
                        <label class="form-check-label" for="radioWithGap4">Credit card</label>
                      </div>
                      <div class="mb-2">
                        <input iname="group2" type="radio" class="form-check-input with-gap" id="radioWithGap5"
                          required>
                        <label class="form-check-label" for="radioWithGap5">Debit card</label>
                      </div>
                      <div class="mb-2">
                        <input name="group2" type="radio" class="form-check-input with-gap" id="radioWithGap6" required>
                        <label class="form-check-label" for="radioWithGap6">Paypal</label>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label for="cc-name123">Name on card</label>
                        <input type="text" class="form-control" id="cc-name123" placeholder="" required>
                        <small class="text-muted">Full name as displayed on card</small>
                        <div class="invalid-feedback">
                          Name on card is required
                        </div>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label for="cc-number123">Credit card number</label>
                        <input type="text" class="form-control" id="cc-number123" placeholder="" required>
                        <div class="invalid-feedback">
                          Credit card number is required
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-3 mb-3">
                        <label for="cc-expiration123">Expiration</label>
                        <input type="text" class="form-control" id="cc-expiration123" placeholder="" required>
                        <div class="invalid-feedback">
                          Expiration date required
                        </div>
                      </div>
                      <div class="col-md-3 mb-3">
                        <label for="cc-cvv123">CVV</label>
                        <input type="text" class="form-control" id="cc-cvv123" placeholder="" required>
                        <div class="invalid-feedback">
                          Security code required
                        </div>
                      </div>
                    </div>
                    <hr class="mb-4">

                    <button class="btn btn-primary btn-lg btn-block" type="submit">Place order</button>

                  </div>
                  <!--/.Panel 3-->

                </div>
                <!-- Pills panels -->


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

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

                <button class="btn btn-primary btn-lg btn-block" type="submit">Place order</button>

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

                  <!--Card content-->
                  <div class="card-body">
                    <h4 class="mb-4 mt-1 h5 text-center font-weight-bold">Summary</h4>

                    <hr>

                    <dl class="row">
                      <dd class="col-sm-8">
                        MDBootstrap UI KIT (jQuery version) - License 6-10 people + unlimited projects
                      </dd>
                      <dd class="col-sm-4">
                        $ 2000
                      </dd>
                    </dl>

                    <hr>

                    <dl class="row">
                      <dd class="col-sm-8">
                        Premium support - 2 years
                      </dd>
                      <dd class="col-sm-4">
                        $ 2000
                      </dd>
                    </dl>

                    <hr>

                    <dl class="row">
                      <dd class="col-sm-8">
                        MDB Membership - 2 years
                      </dd>
                      <dd class="col-sm-4">
                        $ 2000
                      </dd>
                    </dl>

                    <hr>

                    <dl class="row">
                      <dt class="col-sm-8">
                        Total
                      </dt>
                      <dt class="col-sm-4">
                        $ 2000
                      </dt>
                    </dl>
                  </div>

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



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

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

          </div>
        </div>

      


        // Material Select Initialization
        $(document).ready(function() {
        $('.mdb-select').material_select();
        });
Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now