eCommerce sections
Bootstrap eCommerce sections
E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.
Products v.1 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!-- Section: Products v.1 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="grey-text">
<h5>Denim</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Denim trousers</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-o"></i>
</li>
</ul>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit..
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>49$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text ml-3"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="grey-text">
<h5>Shoes</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">High heels</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
</ul>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>89$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Brown coat</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-half-o"></i>
</li>
</ul>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>59$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="grey-text">
<h5>Blouses</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Shirt</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-o"></i>
</li>
</ul>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>119$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text ml-3"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Products v.1 -->
Products v.2 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
.jpg)
.jpg)
<!-- Section: Products v.2 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (55).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Camera</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">GoPro</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>1439$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
<!-- Card -->
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(49).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Photography</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Camera</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>1160$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Smartphone</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">iPhone 6S</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>2160$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Products v.2 -->
Products v.3 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!-- Section: Products v.3 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Card -->
<div class="card align-items-center">
<!-- Card image -->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg" class="card-img-top"
alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body text-center">
<!-- Category & Title -->
<a href="" class="grey-text">
<h5>Shirt</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Denim shirt
<span class="badge badge-pill danger-color">NEW</span>
</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>120$</strong>
</h4>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Card -->
<div class="card align-items-center">
<!-- Card image -->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg" class="card-img-top"
alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body text-center">
<!-- Category & Title -->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Sweatshirt</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>139$</strong>
</h4>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card align-items-center">
<!-- Card image -->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg" class="card-img-top"
alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body text-center">
<!-- Category & Title -->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Grey blouse
<span class="badge badge-pill primary-color">BEST</span>
</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>99$</strong>
</h4>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6">
<!-- Card -->
<div class="card align-items-center">
<!-- Card image -->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg" class="card-img-top"
alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body text-center">
<!-- Category & Title -->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Black jacket</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>219$</strong>
</h4>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Products v.3 -->
Products v.4 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!-- Section: Products v.4 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Collection card -->
<div class="card collection-card z-depth-1-half">
<!-- Card image -->
<div class="view zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid"
alt="">
<div class="stripe dark">
<a>
<p>Red trousers
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!-- Card image -->
</div>
<!-- Collection card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
<!-- Collection card -->
<div class="card collection-card z-depth-1-half">
<!-- Card image -->
<div class="view zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" class="img-fluid"
alt="">
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!-- Card image -->
</div>
<!-- Collection card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-md-0 mb-4">
<!-- Collection card -->
<div class="card collection-card z-depth-1-half">
<!-- Card image -->
<div class="view zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" class="img-fluid"
alt="">
<div class="stripe dark">
<a>
<p>Accessories
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!-- Card image -->
</div>
<!-- Collection card -->
</div>
<!-- Grid column -->
<!-- Fourth column -->
<div class="col-lg-3 col-md-6">
<!-- Collection card -->
<div class="card collection-card z-depth-1-half">
<!-- Card image -->
<div class="view zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" class="img-fluid"
alt="">
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!-- Card image -->
</div>
<!-- Collection card -->
</div>
<!-- Fourth column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Products v.4 -->
Products v.5 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
Shoes
Leather boots
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Jeans
Slim jeans
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shorts
Denim shorts
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Summer hat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shoes
Black heels
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Outerwear
Black jacket
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Leather bag
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
Accessories
Leather belt
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
<!-- Section: Products v.5 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas
nostrum quisquam eum porro a pariatur veniam.</p>
<!-- Carousel Wrapper -->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!-- Controls -->
<div class="controls-top">
<a class="btn-floating primary-color waves-effect waves-light" href="#multi-item-example" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn-floating primary-color waves-effect waves-light" href="#multi-item-example" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</div>
<!-- Controls -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="primary-color active" data-target="#multi-item-example" data-slide-to="0"></li>
<li class="primary-color" data-target="#multi-item-example" data-slide-to="1"></li>
<li class="primary-color" data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!-- Indicators -->
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<div class="col-md-4 mb-2">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Leather boots</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Jeans</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Slim jeans</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">99$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg" class="card-img-top" alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Shorts</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Denim shorts</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">49$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
</div>
<!-- First slide -->
<!-- Second slide -->
<div class="carousel-item">
<div class="col-md-4 mb-2">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Summer hat</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">39$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Black heels</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">79$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Outerwear</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Black jacket</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">149$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
</div>
<!-- Second slide -->
<!--Third slide -->
<div class="carousel-item">
<div class="col-md-4 mb-2">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(38).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Leather bag</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">29$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Leather belt</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">89$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-2 clearfix d-none d-md-block">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(57).jpg" class="card-img-top"
alt="sample photo">
<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 -->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title my-4">
<strong>
<a href="">Sneakers</a>
</strong>
</h4>
<!-- Description -->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci.
</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left">129$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="fa fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="fa fa-heart ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
</div>
<!--Third slide -->
</div>
<!-- Slides -->
</div>
<!-- Carousel Wrapper -->
</section>
<!-- Section: Products v.5 -->
Pricing v.1 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
10
Basic
-
20 GB Of Storage
-
2 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
20
Pro
-
20 GB Of Storage
-
4 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
30
Enterprise
-
30 GB Of Storage
-
5 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
<!-- Section: Pricing v.1 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card">
<!-- Price -->
<div class="price header white-text blue rounded-top">
<h2 class="number">10</h2>
<div class="version">
<h5 class="mb-0">Basic</h5>
</div>
</div>
<!-- Features -->
<div class="card-body striped mb-1">
<ul>
<li>
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times red-text pr-2"></i>24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times red-text pr-2"></i>300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times red-text pr-2"></i>User Management </p>
</li>
</ul>
<button class="btn btn-blue">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card">
<!-- Price -->
<div class="price header white-text indigo rounded-top">
<h2 class="number">20</h2>
<div class="version">
<h5 class="mb-0">Pro</h5>
</div>
</div>
<!-- Features -->
<div class="card-body striped mb-1">
<ul>
<li>
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>4 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times red-text pr-2"></i>300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times red-text pr-2"></i>User Management</p>
</li>
</ul>
<button class="btn btn-indigo">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Pricing card -->
<div class="card pricing-card">
<!-- Price -->
<div class="price header white-text deep-purple rounded-top">
<h2 class="number">30</h2>
<div class="version">
<h5 class="mb-0">Enterprise</h5>
</div>
</div>
<!-- Features -->
<div class="card-body striped mb-1">
<ul>
<li>
<p class="mt-2"><i class="fa fa-check green-text pr-2"></i>30 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>5 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-check green-text pr-2"></i>User Management</p>
</li>
</ul>
<button class="btn btn-deep-purple">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.1 -->
Pricing v.2 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!-- Section: Pricing v.2 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!-- Pricing card -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!-- Content -->
<div class="card-body">
<h5>Basic</h5>
<!-- Price -->
<div class="price pt-0">
<h2 class="number mb-0">10</h2>
</div>
<ul class="striped mb-0">
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
<li>
<p><strong>250</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Pricing card -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!-- Pricing card -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">
<!-- Content -->
<div class="card-body">
<h5>Pro</h5>
<!-- Price -->
<div class="price pt-0">
<h2 class="number mb-0">20</h2>
</div>
<ul class="striped mb-0">
<li>
<p><strong>3</strong> project</p>
</li>
<li>
<p><strong>200</strong> components</p>
</li>
<li>
<p><strong>250</strong> features</p>
</li>
<li>
<p><strong>300</strong> members</p>
</li>
<li>
<p><strong>350</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Pricing card -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!-- Pricing card -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!-- Content -->
<div class="card-body">
<h5>Enterprise</h5>
<!-- Price -->
<div class="price pt-0">
<h2 class="number mb-0">30</h2>
</div>
<ul class="striped mb-0">
<li>
<p><strong>5</strong> project</p>
</li>
<li>
<p><strong>300</strong> components</p>
</li>
<li>
<p><strong>350</strong> features</p>
</li>
<li>
<p><strong>400</strong> members</p>
</li>
<li>
<p><strong>450</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white"> Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Pricing card -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.2 -->
Pricing v.3 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Basic plan
59$
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!-- Section: Pricing v.3 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Basic plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-home light-blue-text"></i>
</div>
</div>
<!-- Price -->
<h2 class="font-weight-bold my-4">59$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id
nobis accusamus deleniti cumque hic laborum.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card purple-gradient">
<!-- Content -->
<div class="card-body white-text">
<!-- Offer -->
<h5 class="mb-4">Premium plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-group"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">79$</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate
sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Advanced plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-bar-chart light-blue-text"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">99$</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni
accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.3 -->
Pricing v.4 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Basic plan
59$
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!-- Section: Pricing v.4 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Basic plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-home indigo-text"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">59$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id
nobis accusamus deleniti cumque hic laborum.</p>
<a class="btn btn-indigo btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card indigo">
<!-- Content -->
<div class="card-body white-text">
<!-- Offer -->
<h5 class="mb-4">Premium plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-group"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">79$</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate
sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="card">
<!-- Content -->
<div class="card-body">
<!-- Offer -->
<h5 class="mb-4">Advanced plan</h5>
<div class="d-flex justify-content-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fa fa-line-chart indigo-text"></i>
</div>
</div>
<!--Price -->
<h2 class="font-weight-bold my-4">99$</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni
accusantium repellat eveniet quia vitae.</p>
<a class="btn btn-indigo btn-rounded">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.4 -->
Pricing v.5 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!-- Section: Pricing v.5 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Card -->
<div class="pricing-card card">
<!-- Content -->
<div class="card-body">
<h5 class="font-weight-bold mt-3">Basic</h5>
<!-- Price -->
<div class="price pt-0">
<h2 class="number red-text mb-0">10</h2>
</div>
<ul class="striped mb-1">
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<a class="btn btn-danger btn-rounded mb-4"> Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(8).jpg');">
<!-- Pricing card -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
<!-- Content -->
<div class="card-body">
<h5 class="font-weight-bold mt-2">Pro</h5>
<!--Price -->
<div class="price pt-0">
<h2 class="number mb-0">20</h2>
</div>
<ul class="striped mb-0">
<li>
<p><strong>3</strong> projects</p>
</li>
<li>
<p><strong>200</strong> components</p>
</li>
<li>
<p><strong>250</strong> features</p>
</li>
<li>
<p><strong>300</strong> members</p>
</li>
</ul>
<a class="btn btn-rounded btn-outline-white">Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Pricing card -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Card -->
<div class="pricing-card card">
<!-- Content -->
<div class="card-body">
<h5 class="font-weight-bold mt-3">Enterprise</h5>
<!-- Price -->
<div class="price pt-0">
<h2 class="number red-text mb-0">30</h2>
</div>
<ul class="striped mb-1">
<li>
<p><strong>5</strong> projects</p>
</li>
<li>
<p><strong>300</strong> components</p>
</li>
<li>
<p><strong>350</strong> features</p>
</li>
<li>
<p><strong>400</strong> members</p>
</li>
</ul>
<a class="btn btn-danger btn-rounded mb-4"> Buy now</a>
</div>
<!-- Content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.5 -->
Pricing v.6 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
BASIC
20$
-
1 project
-
100 components
-
150 features
-
200 members
PRO
80$
-
1 project
-
100 components
-
150 features
-
200 members
ENTERPRISE
100$
-
1 project
-
100 components
-
150 features
-
200 members
<!-- Section: Pricing v.6 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam
eum porro a pariatur veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="aqua-gradient rounded-top">
<h4 class="option">BASIC</h4>
</div>
<!-- Features -->
<div class="card-body striped green-striped card-background px-5">
<h2 class="my-4 pb-3 h1">20$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="peach-gradient rounded-top">
<h4 class="option">PRO</h4>
</div>
<!-- Features -->
<div class="card-body striped orange-striped card-background px-5">
<h2 class="my-4 pb-3 h1">80$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="purple-gradient rounded-top">
<h4 class="option">ENTERPRISE</h4>
</div>
<!-- Features -->
<div class="card-body striped purple-striped card-background px-5">
<h2 class="my-4 pb-3 h1">100$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Pricing v.6 -->
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB 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 ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations 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