<!-- Container for demo purpose -->

<div class="container my-5">

​

  <!--Section: Design Block-->

  <section class="mb-10">

    <div class="d-md-flex justify-content-between align-items-center mb-4">

      <h2 class="fw-bold mb-md-0">Ceramic mugs</h2>

      <h6 class="mb-0"><a href="#!">See all products <i class="fas fa-arrow-right fa-sm ms-1"></i></a></h6>

    </div>

    <div class="row">

      <div class="col-md-6 col-lg-3 mb-5 mb-lg-0">

        <div class="bg-image hover-zoom shadow-5 rounded-5 mb-3" data-mdb-ripple-init data-ripple-color="light">

          <img src="https://mdbootstrap.com/img/Photos/new-templates/img52.jpg" alt="Mug 1" class="w-100" />

          <a href="#!">

            <div class="mask"></div>

          </a>

        </div>

        <div class="d-flex justify-content-between">

          <h6>Green mug</h6>

          <h6>€25</h6>

        </div>

        <div class="d-flex justify-content-between align-items-center">

          <p class="mb-0">Mugs</p>

          <a href="#!" class="link-dark"><i class="fas fa-shopping-bag"></i></a>

        </div>

      </div>

      <div class="col-md-6 col-lg-3 mb-5 mb-lg-0">

        <div class="bg-image hover-zoom shadow-5 rounded-5 mb-3" data-mdb-ripple-init data-ripple-color="light">

          <img src="https://mdbootstrap.com/img/Photos/new-templates/img54.jpg" alt="Mug 2" class="w-100" />

          <a href="#!">

            <div class="mask"></div>

          </a>

        </div>

        <div class="d-flex justify-content-between">

          <h6>White mug</h6>

          <h6>€18</h6>

        </div>

        <div class="d-flex justify-content-between align-items-center">

          <p class="mb-0">Mugs</p>

          <a href="#!" class="link-dark"><i class="fas fa-shopping-bag"></i></a>

        </div>

      </div>

      <div class="col-md-6 col-lg-3 mb-5 mb-md-0">

        <div class="bg-image hover-zoom shadow-5 rounded-5 mb-3" data-mdb-ripple-init data-ripple-color="light">

          <img src="https://mdbootstrap.com/img/Photos/new-templates/img53.jpg" alt="Mug 3" class="w-100" />

          <a href="#!">

            <div class="mask"></div>

          </a>

        </div>

        <div class="d-flex justify-content-between">

          <h6>Black mug</h6>

          <h6>€27</h6>

        </div>

        <div class="d-flex justify-content-between align-items-center">

          <p class="mb-0">Mugs</p>

          <a href="#!" class="link-dark"><i class="fas fa-shopping-bag"></i></a>

        </div>

      </div>

      <div class="col-md-6 col-lg-3">

        <div class="bg-image hover-zoom shadow-5 rounded-5 mb-3" data-mdb-ripple-init data-ripple-color="light">

          <img src="https://mdbootstrap.com/img/Photos/new-templates/img51.jpg" alt="Mug 4" class="w-100" />

          <a href="#!">

            <div class="mask"></div>

          </a>

        </div>

        <div class="d-flex justify-content-between">

          <h6>Red mug</h6>

          <h6>€16</h6>

        </div>

        <div class="d-flex justify-content-between align-items-center">

          <p class="mb-0">Mugs</p>

          <a href="#!" class="link-dark"><i class="fas fa-shopping-bag"></i></a>

        </div>

      </div>

    </div>

  </section>

  <!--Section: Design Block-->

​

</div>

<!-- Container for demo purpose -->

​

​