Lightbox

<div id="mdb-lightbox-ui"></div>

<div class="row">
    <div class="col-md-12">
        <p>Multiple images</p>

        <div class="mdb-lightbox">

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een boot in een meer.">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(42).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(42).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een ondergaande zon in de bergen">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(43).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(43).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een ondergaande zon gezien vanuit het vliegtuig">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(45).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van water scheppen">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(46).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een zee gezien vanaf een klif">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(47).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een spiegel meer">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(48).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een waterval in een kloof">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(49).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(49).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een ondergaande zon op een strand">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(51).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een zonsondergang">
                </a>
            </figure>

        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <p>Single landscape image</p>
        <div class="mdb-lightbox">
            <figure>
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een boot in een meer.">
                </a>
            </figure>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <p>Single portrait image</p>
        <div class="mdb-lightbox">
            <figure>
                <a href="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" data-size="472x708">
                    <img src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een meer tussen de bergen">
                </a>
            </figure>
        </div>

    </div>
</div>