<div class="ecommerce-gallery">

  <div class="row">

    <div class="col-12 mb-1">

      <div class="lightbox">

        <img

          src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"

          alt="Table Full of Spices"

          class="ecommerce-gallery-main-img active w-100"

        />

      </div>

    </div>

    <div class="col-4 my-1">

      <img

        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"

        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"

        alt="Table full of spices"

        class="active w-100"

      />

    </div>

    <div class="col-4 my-1">

      <img

        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"

        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"

        alt="Winter Landscape"

        class="w-100"

      />

    </div>

    <div class="col-4 my-1">

      <img

        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"

        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"

        alt="View of the City in the Mountains"

        class="w-100"

      />

    </div>

  </div>

</div>

​

<!-- Sidenav -->

<nav

  id="sidenav-1"

  class="sidenav"

  data-mdb-hidden="false"

>

  <ul class="sidenav-menu">

    <li class="sidenav-item">

      <a class="sidenav-link">

        <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a

      >

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link"

        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a

      >

      <ul class="sidenav-collapse show">

        <li class="sidenav-item">

          <a class="sidenav-link">Link 2</a>

        </li>

        <li class="sidenav-item">

          <a class="sidenav-link">Link 3</a>

        </li>

      </ul>

    </li>

    <li class="sidenav-item">

      <a class="sidenav-link"

        ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a

      >

      <ul class="sidenav-collapse">

        <li class="sidenav-item">

          <a class="sidenav-link">Link 4</a>

        </li>

        <li class="sidenav-item">

          <a class="sidenav-link"

            >Link 5</a

          >

        </li>

      </ul>

    </li>

  </ul>

</nav>

<!-- Sidenav -->

​

<!-- Toggler -->

<button

id="sidenav-toggle"

  class="btn btn-primary"

>

  <i class="fas fa-bars"></i>

</button>

<!-- Toggler -->