Layout compositions

eCommerce layout compositions

MDB provides you several useful, ready-to-use layouts with various predefined navigation types and grid schemas.


Basic layout composition

Basic and recommended composition, which is used in most eCommerce pages.

Header:

  • Full-width and fixed navbar component
  • Subtle scrolling animation
  • Image or solid intro

Main:

  • Basic .container
  • Basic grid construction

Footer:

  • Basic footer component with the most important links

Image intro

Live example


  <!-- Main Navigation -->
  <header>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light navbar-transparent fixed-top scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand" href="https://mdbecommerce.com/">
          <i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
        </a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

          <!-- Right -->
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#!" class="nav-link navbar-link-2 waves-effect">
                <span class="badge badge-pill red">1</span>
                <i class="fas fa-shopping-cart pl-0"></i>
              </a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="true">
                <i class="united kingdom flag m-0"></i>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#!">Action</a>
                <a class="dropdown-item" href="#!">Another action</a>
                <a class="dropdown-item" href="#!">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Shop
              </a>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Contact
              </a>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Sign in
              </a>
            </li>
            <li class="nav-item pl-2 mb-2 mb-md-0">
              <a href="#!" type="button"
                class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
                up</a>
            </li>
          </ul>

        </div>
        <!-- Links -->
      </div>
    </nav>
    <!-- Navbar -->

    <div class="jumbotron jumbotron-image color-grey-light"
      style="background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(3)-crop.jpg'); height: 400px;">
      <div class="mask rgba-black-strong d-flex align-items-center h-100">
        <div class="container text-center white-text py-5">
          <h1 class="mb-3">Shop Custom Page</h1>
          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt justo non massa
            porta molestie.</p>
        </div>
      </div>
    </div>

  </header>
  <!-- Main Navigation -->

  <!--Main layout-->
  <main>
    <div class="container mb-4">

      <!--Section: Content-->
      <section>

        <h4 class="text-center my-5"><strong>Categories</strong></h4>

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(1).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Dresses</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(2).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Shirts</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(3).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Jeans</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(4).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Shoes</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(5).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Accessories</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(6).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Jewelry</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

      </section>
      <!--Section: Content-->

    </div>
  </main>
  <!--Main layout-->

  <!-- Footer -->
  <footer class="page-footer font-small elegant-color">

    <div class="color-primary">
      <div class="container">

        <!-- Grid row-->
        <div class="row py-4 d-flex align-items-center">

          <!-- Grid column -->
          <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
            <h6 class="mb-0">Get connected with us on social networks!</h6>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-6 col-lg-7 text-center text-md-right">

            <!-- Facebook -->
            <a class="fb-ic">
              <i class="fab fa-facebook-f white-text mr-4"> </i>
            </a>
            <!-- Twitter -->
            <a class="tw-ic">
              <i class="fab fa-twitter white-text mr-4"> </i>
            </a>
            <!-- Google +-->
            <a class="gplus-ic">
              <i class="fab fa-google-plus-g white-text mr-4"> </i>
            </a>
            <!--Linkedin -->
            <a class="li-ic">
              <i class="fab fa-linkedin-in white-text mr-4"> </i>
            </a>
            <!--Instagram-->
            <a class="ins-ic">
              <i class="fab fa-instagram white-text"> </i>
            </a>

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

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

      </div>
    </div>

    <!-- Footer Links -->
    <div class="container text-center text-md-left pt-4 pt-md-5">

      <!-- Grid row -->
      <div class="row mt-1 mt-md-0 mb-4 mb-md-0">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>About me</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
            ipsum dolor sit amet,
            consectetur
            adipisicing elit.</p>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Products</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="list-unstyled foot-desc">
            <li class="mb-2">
              <a href="#!">MDBootstrap</a>
            </li>
            <li class="mb-2">
              <a href="#!">MDWordPress</a>
            </li>
            <li class="mb-2">
              <a href="#!">BrandFlow</a>
            </li>
            <li class="mb-2">
              <a href="#!">Bootstrap Angular</a>
            </li>
          </ul>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Useful links</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="list-unstyled foot-desc">
            <li class="mb-2">
              <a href="#!">Your Account</a>
            </li>
            <li class="mb-2">
              <a href="#!">Become an Affiliate</a>
            </li>
            <li class="mb-2">
              <a href="#!">Shipping Rates</a>
            </li>
            <li class="mb-2">
              <a href="#!">Help</a>
            </li>
          </ul>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Contacts</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="fa-ul foot-desc ml-4">
            <li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
            </li>
            <li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
            <li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
            <li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
          </ul>

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

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

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2020 Copyright:
      <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->

      

Solid color intro

Live example


   <!-- Main Navigation -->
   <header>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand" href="https://mdbecommerce.com/">
          <i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
        </a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

          <!-- Right -->
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#!" class="nav-link navbar-link-2 waves-effect">
                <span class="badge badge-pill red">1</span>
                <i class="fas fa-shopping-cart pl-0"></i>
              </a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="true">
                <i class="united kingdom flag m-0"></i>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#!">Action</a>
                <a class="dropdown-item" href="#!">Another action</a>
                <a class="dropdown-item" href="#!">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Shop
              </a>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Contact
              </a>
            </li>
            <li class="nav-item">
              <a href="#!" class="nav-link waves-effect">
                Sign in
              </a>
            </li>
            <li class="nav-item pl-2 mb-2 mb-md-0">
              <a href="#!" type="button"
                class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
                up</a>
            </li>
          </ul>

        </div>
        <!-- Links -->
      </div>
    </nav>
    <!-- Navbar -->

    <div class="jumbotron color-grey-light mt-70">
      <div class="d-flex align-items-center h-100">
        <div class="container text-center py-5">
          <h1 class="mb-3">Shop Custom Page</h1>
          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt justo non massa
            porta molestie.</p>
        </div>
      </div>
    </div>

  </header>
  <!-- Main Navigation -->

  <!--Main layout-->
  <main>
    <div class="container mb-4">

      <!--Section: Content-->
      <section>

        <h4 class="text-center my-5"><strong>Categories</strong></h4>

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(1).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Dresses</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(2).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Shirts</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(3).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Jeans</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(4).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Shoes</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(5).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Accessories</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

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

              <div class="view zoom brighten z-depth-2 rounded">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(6).jpg"
                  alt="Sample">
                <a href="#!" class="text-white">
                  <div class="mask card-mask-color waves-effect waves-light">
                    <div class="d-flex align-items-end h-100 p-3">
                      <h5 class="mb-0">Jewelry</h5>
                    </div>
                  </div>
                </a>
              </div>

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

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

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

      </section>
      <!--Section: Content-->

    </div>
  </main>
  <!--Main layout-->

  <!-- Footer -->
  <footer class="page-footer font-small elegant-color">

    <div class="color-primary">
      <div class="container">

        <!-- Grid row-->
        <div class="row py-4 d-flex align-items-center">

          <!-- Grid column -->
          <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
            <h6 class="mb-0">Get connected with us on social networks!</h6>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-6 col-lg-7 text-center text-md-right">

            <!-- Facebook -->
            <a class="fb-ic">
              <i class="fab fa-facebook-f white-text mr-4"> </i>
            </a>
            <!-- Twitter -->
            <a class="tw-ic">
              <i class="fab fa-twitter white-text mr-4"> </i>
            </a>
            <!-- Google +-->
            <a class="gplus-ic">
              <i class="fab fa-google-plus-g white-text mr-4"> </i>
            </a>
            <!--Linkedin -->
            <a class="li-ic">
              <i class="fab fa-linkedin-in white-text mr-4"> </i>
            </a>
            <!--Instagram-->
            <a class="ins-ic">
              <i class="fab fa-instagram white-text"> </i>
            </a>

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

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

      </div>
    </div>

    <!-- Footer Links -->
    <div class="container text-center text-md-left pt-4 pt-md-5">

      <!-- Grid row -->
      <div class="row mt-1 mt-md-0 mb-4 mb-md-0">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>About me</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
            ipsum dolor sit amet,
            consectetur
            adipisicing elit.</p>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Products</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="list-unstyled foot-desc">
            <li class="mb-2">
              <a href="#!">MDBootstrap</a>
            </li>
            <li class="mb-2">
              <a href="#!">MDWordPress</a>
            </li>
            <li class="mb-2">
              <a href="#!">BrandFlow</a>
            </li>
            <li class="mb-2">
              <a href="#!">Bootstrap Angular</a>
            </li>
          </ul>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Useful links</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="list-unstyled foot-desc">
            <li class="mb-2">
              <a href="#!">Your Account</a>
            </li>
            <li class="mb-2">
              <a href="#!">Become an Affiliate</a>
            </li>
            <li class="mb-2">
              <a href="#!">Shipping Rates</a>
            </li>
            <li class="mb-2">
              <a href="#!">Help</a>
            </li>
          </ul>

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

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

          <!-- Links -->
          <h5>Contacts</h5>
          <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

          <ul class="fa-ul foot-desc ml-4">
            <li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
            </li>
            <li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
            <li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
            <li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
          </ul>

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

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

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2020 Copyright:
      <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->

      

Content presentation schemes

The content is placed in the <main> element. There are 2 main schemes for presenting content in the eCommerce projects:

  1. Three-column grid for the full width of the container
  2. Two-column grid with sidebar

Three-column grid

Typical for home pages .

Live example


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

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

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

              <div class="view zoom overlay">
                <img class="img-fluid w-100"
                  src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
                <a href="#!">
                  <div class="mask waves-effect waves-light">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
                    <div class="mask rgba-black-slight waves-effect waves-light"></div>
                  </div>
                </a>
              </div>

              <div class="card-body text-center pt-4">

                <h5>Blue denim shirt</h5>
                <p class="mb-2 text-muted text-uppercase small">Shirts</p>
                <ul class="rating">
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                </ul>
                <hr>
                <p><span class="mr-1"><strong>$17.99</strong></span></p>
                <button type="button" class="btn btn-primary btn-sm mr-1 mb-2 waves-effect waves-light"><i
                    class="fas fa-shopping-cart pr-2"></i>Add to cart</button>
                <button type="button" class="btn btn-light btn-sm mr-1 mb-2 waves-effect waves-light"><i
                    class="fas fa-info-circle pr-2"></i>Details</button>
                <button type="button"
                  class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main waves-effect waves-light"
                  data-toggle="tooltip" data-placement="top" title="Add to wishlist"><i
                    class="far fa-heart"></i></button>

              </div>

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

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

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

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

              <div class="view zoom overlay">
                <img class="img-fluid w-100"
                  src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
                <h4 class="mb-0"><span class="badge badge-dark badge-pill badge-news">Sold out</span></h4>
                <a href="#!">
                  <div class="mask waves-effect waves-light">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
                    <div class="mask rgba-black-slight waves-effect waves-light"></div>
                  </div>
                </a>
              </div>

              <div class="card-body text-center pt-4">

                <h5>Red hoodie</h5>
                <p class="mb-2 text-muted text-uppercase small">Hoodies</p>
                <ul class="rating">
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="far fa-star fa-sm text-primary"></i>
                  </li>
                </ul>
                <hr>
                <p><span class="mr-1"><strong>$35.99</strong></span></p>
                <button type="button" class="btn btn-light btn-sm mr-1 mb-2 waves-effect waves-light"><i
                    class="fas fa-info-circle pr-2"></i>Details</button>
                <button type="button"
                  class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main waves-effect waves-light"
                  data-toggle="tooltip" data-placement="top" title="Add to wishlist"><i
                    class="far fa-heart"></i></button>

              </div>

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

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

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

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

              <div class="view zoom overlay">
                <img class="img-fluid w-100"
                  src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
                <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
                <a href="#!">
                  <div class="mask waves-effect waves-light">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
                    <div class="mask rgba-black-slight waves-effect waves-light"></div>
                  </div>
                </a>
              </div>

              <div class="card-body text-center pt-4">

                <h5>Grey sweater</h5>
                <p class="mb-2 text-muted text-uppercase small">Sweaters</p>
                <ul class="rating">
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-primary"></i>
                  </li>
                </ul>
                <hr>
                <p><span class="text-danger mr-1"><strong>$21.99</strong></span><span
                    class="text-grey"><strong><s>$36.99</s></strong></span></p>
                <button type="button" class="btn btn-primary btn-sm mr-1 mb-2 waves-effect waves-light"><i
                    class="fas fa-shopping-cart pr-2"></i>Add to cart</button>
                <button type="button" class="btn btn-light btn-sm mr-1 mb-2 waves-effect waves-light"><i
                    class="fas fa-info-circle pr-2"></i>Details</button>
                <button type="button"
                  class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main waves-effect waves-light"
                  data-toggle="tooltip" data-placement="top" title="Add to wishlist"><i
                    class="far fa-heart"></i></button>

              </div>

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

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

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

      

Two-column grid with sidebar

Typical for shop pages.

Note: It is good practice to use minimalist product cards with this design. Due to space limited by the sidebar, it is recommended to use components with as few elements as possible.

Live example


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

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

          <!-- Section: Sidebar -->
          <section>

            <!-- Section: Categories -->
            <section>

              <h5>Subcategories</h5>

              <div class="text-muted small text-uppercase mb-5">
                <p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes,
                      Accessories</strong></a></p>

                <p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
                <p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
                <p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
                <p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
                <p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
              </div>

            </section>
            <!-- Section: Categories -->

            <!-- Section: Filters -->
            <section>

              <h5 class="pt-2 mb-4">Filters</h5>

              <section class="mb-4">

                <div class="md-form md-outline mt-0 d-flex justify-content-between align-items-center">
                  <input type="text" id="search12" class="form-control mb-0" placeholder="Search...">
                  <a href="#!" class="btn btn-flat btn-md px-3 waves-effect"><i class="fas fa-search fa-lg"></i></a>
                </div>

              </section>

              <!-- Section: Condition -->
              <section class="mb-4">

                <h6 class="font-weight-bold mb-3">Condition</h6>

                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="new">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="new">New</label>
                </div>
                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="used">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="used">Used</label>
                </div>
                <div class="form-check pl-0 mb-3">
                  <input type="checkbox" class="form-check-input filled-in" id="collectible">
                  <label class="form-check-label small text-uppercase card-link-secondary"
                    for="collectible">Collectible</label>
                </div>
                <div class="form-check pl-0 mb-3 pb-1">
                  <input type="checkbox" class="form-check-input filled-in" id="renewed">
                  <label class="form-check-label small text-uppercase card-link-secondary" for="renewed">Renewed</label>
                </div>

              </section>
              <!-- Section: Condition -->

            </section>
            <!-- Section: Filters -->

          </section>
          <!-- Section: Sidebar -->

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

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

          <!-- Section: Block Content -->
          <section class="mb-3">

            <div class="row d-flex justify-content-around align-items-center">
              <div class="col-12 col-md-3 text-center text-md-left">
                <a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
                <a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
              </div>
              <div class="col-12 col-md-5">
                <div class="d-flex flex-wrap">
                  <div class="select-outline position-relative w-100">
                    <select class="mdb-select md-outline md-form" searchable="Search here..">
                      <option value="" disabled selected>Choose category</option>
                      <option value="1">Category 1</option>
                      <option value="2">Category 2</option>
                      <option value="3">Category 3</option>
                      <option value="4">Category 4</option>
                      <option value="5">Category 5</option>
                    </select>
                    <label>Label example</label>
                    <button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-4 text-center">
                <nav aria-label="Page navigation example">
                  <ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
                    <li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
                    <li class="page-item active"><a class="page-link">1</a></li>
                    <li class="page-item"><a class="page-link">2</a></li>
                    <li class="page-item"><a class="page-link">3</a></li>
                    <li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
                  </ul>
                </nav>
              </div>
            </div>

          </section>
          <!-- Section: Block Content -->

          <!--Section: Block Content-->
          <section>

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

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

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

                  <div class="view zoom overlay rounded z-depth-2">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.jpg" alt="Sample">
                    <a href="#!">
                      <div class="mask">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg">
                        <div class="mask rgba-black-slight"></div>
                      </div>
                    </a>
                  </div>

                  <div class="text-center pt-4">

                    <h5>Black denim jacket</h5>
                    <p><span class="mr-1"><strong>$99.99</strong></span></p>

                  </div>

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

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

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

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

                  <div class="view zoom overlay rounded z-depth-2">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
                    <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
                    <a href="#!">
                      <div class="mask">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
                        <div class="mask rgba-black-slight"></div>
                      </div>
                    </a>
                  </div>

                  <div class="text-center pt-4">

                    <h5>Grey sweater</h5>
                    <p><span class="text-danger mr-1"><strong>$21.99</strong></span><span
                        class="text-grey"><strong><s>$36.99</s></strong></span></p>

                  </div>

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

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

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

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

                  <div class="view zoom overlay rounded z-depth-2">
                    <img class="img-fluid w-100"
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
                    <a href="#!">
                      <div class="mask">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
                        <div class="mask rgba-black-slight"></div>
                      </div>
                    </a>
                  </div>

                  <div class="text-center pt-4">

                    <h5>Blue denim shirt</h5>
                    <p><span class="mr-1"><strong>$17.99</strong></span></p>

                  </div>

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

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

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

          </section>
          <!--Section: Block Content-->

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

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