Angular Bootstrap Gallery

Angular Gallery - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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:

  • Popular paintings on a museum website
  • Landscape photos in traveling blog
  • The best pieces of work in a portfolio

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


Required screenfull library

Using lightbox requires you to have installed the Screenfull library. Install it using the following command, and then add it to your imports in angular.json. This process is described in Quickstart Guide.

        
            
        npm install --save screenfull@3.3.0
      
        
    




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.webp"
                      alt="video"></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.webp"
                      alt="video"></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.webp"
                      alt="video"></a>
            </div>
          </div>
          <div class="row">
            <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.webp"
                      alt="video"></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.webp"
                      alt="video"></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.webp"
                      alt="video"></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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (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/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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video4.hide()">Close
                  </button>
                </div>
                <!--/.Content-->
              </div>
            </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/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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video5.hide()">Close
                  </button>
                </div>
                <!--/.Content-->
              </div>
            </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/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" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (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).webp"
                     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).webp"
                     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).webp"
                     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.

        
            
          import { LightBoxModule, CarouselModule, ModalModule, WavesModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { LightBoxModule, CarouselModule, ModalModule, 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