​

<div class="col-4">

  <div class="card">

    <img

      src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"

      class="card-img-top"

      alt="..."

    />

    <div class="card-body">

      <h5 class="card-title">Cars</h5>

      <p class="card-text">

        Here 5 pictures should open in the lightbox

      </p>

      <a href="#!" class="btn btn-primary" id="lightboxToggler">Start lightbox</a>

    </div>

  </div>

</div>

<div class="lightbox d-none" id="lightbox">

  <div class="row">

    <div class="col-lg-4">

      <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"

        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg" alt="Lightbox image 1"

        class="w-100" />

    </div>

    <div class="col-lg-4">

      <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"

        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.jpg" alt="Lightbox image 2"

        class="w-100" />

    </div>

    <div class="col-lg-4">

      <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"

        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.jpg" alt="Lightbox image 3"

        class="w-100" />

    </div>

  </div>

</div>