Rate this docs

Angular Bootstrap gallery

Angular Gallery - Bootstrap 4 & Material Design

Angular Bootstrap gallery is a component with great UI and UX values. With it you can combine beautiful and stunning images with your website or application!

Easy to construct in a form of a lightbox gallery, multi item carousel or slides with caption.

Examples of Bootstrap gallery use:

  • Most popular paintings on a museum website
  • Landscape photos in traveling blog
  • Best pieces of work in a portfolio

All of the above can be easily created by following those examples:





Gallery with modals MDB Pro component

video
video
video
video
video
video

        <div class="row">

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video1.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg"
                alt="video" data-toggle="modal" data-target="#modal1"></a>
          </div>

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video2.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg"
                alt="video" data-toggle="modal" data-target="#modal6"></a>
          </div>

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video3.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg"
                alt="video" data-toggle="modal" data-target="#modal4"></a>
          </div>

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video4.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-4.jpg"
                alt="video" data-toggle="modal" data-target="#modal2"></a>
          </div>

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video5.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-5.jpg"
                alt="video" data-toggle="modal" data-target="#modal5"></a>
          </div>

          <div class="col-md-4 mx-auto my-5">
            <a><img (click)="video6.show()" class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-6.jpg"
                alt="video" data-toggle="modal" data-target="#modal3"></a>
          </div>

        </div>

        <div mdbModal #video1="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video1.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>

        <div mdbModal #video2="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video2.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>

        <div mdbModal #video3="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video3.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>

        <div mdbModal #video4="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GUEZCxBcM78" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video4.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>

        <div mdbModal #video5="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PjGkVCAo8Fw" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video5.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>

        <div mdbModal #video6="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">
                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gsNY7TV4r1M" allowfullscreen></iframe>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
                    <i class="fa fa-facebook"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
                    <i class="fa fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
                    <i class="fa fa-google-plus"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
                    <i class="fa fa-linkedin"></i>
                  </a>
                </div>
                <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                  mdbWavesEffect data-dismiss="modal" (click)="video6.hide()">Close</button>

              </div>

            </div>
            <!--/.Content-->

          </div>

      


Gallery with slides and captions


        <!--Carousel Wrapper-->
        <mdb-carousel [isControls]="true" class="carousel slide carousel-fade" [animation]="'fade'">
          <!--First slide-->
          <mdb-carousel-item>
            <div class="view w-100">
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
              <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
            </div>
            <div class="carousel-caption">
              <h3 class="h3-responsive">Light mask</h3>
              <p>First text</p>
            </div>
          </mdb-carousel-item>
          <!--/First slide-->
          <!--Second slide-->
          <mdb-carousel-item>
            <div class="view w-100">
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
              <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
            </div>
            <div class="carousel-caption">
              <h3 class="h3-responsive">Strong mask</h3>
              <p>Secondary text</p>
            </div>
          </mdb-carousel-item>
          <!--/Second slide-->
          <!--Third slide-->
          <mdb-carousel-item>
            <div class="view w-100">
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
              <div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
            </div>
            <div class="carousel-caption">
              <h3 class="h3-responsive">Slight mask</h3>
              <p>Third text</p>
            </div>
          </mdb-carousel-item>
          <!--/Third slide-->
        </mdb-carousel>
        <!--/.Carousel Wrapper-->
      

Angular Gallery - API

In this section you will find informations about required modules of gallery component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// For MDB Angular Pro
import { LightboxModule, CarouselModule, ModalsModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { LightboxModule, CarouselModule, ModalsModule, WavesModule } from 'angular-bootstrap-md'

Using Lightbox requires external library called screenfull. Install it by executing below command:

        
            npm install screenfull --save
        
    

Components

ImageModalComponent - Lightbox

Selector: mdb-imnage-modal

Type: ImageModalComponent

API Reference: LINK

CarouselComponent

Selector: mdb-carousel

Type: CarouselComponent

API Reference: LINK

SlideComponent

Selector: mdb-carousel-item

Type: SlideComponent

API Reference: LINK

Directives

ModalDirective

Selector: mdbModal

Type: ModalDirective

API Reference: LINK