Skip to main content Skip to docs navigation

Photo Gallery

The photo gallery provides a convenient way to display a collection of images.
Custom Arizona Bootstrap Component

On this page

About

The Photo Gallery component displays a collection of images in a grid layout. Individual images can be clicked on to view a larger version of that image. Once an image is clicked, the entire gallery opens in a modal slideshow, where users can scroll through the images.

Example

html
<div class="bd-example">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3 px-min" data-bs-toggle="modal" data-bs-target="#myGalleryModal">
        <a role="button" data-bs-target="#myGallery" data-bs-slide-to="0">
          <picture class="card-img img-fluid">
            <source srcset="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-1-thumb.jpg 1x">
            <img class="mw-100" src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-1.jpg" alt="A hand holding a little mirror">
          </picture>
        </a>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 px-min" data-bs-toggle="modal" data-bs-target="#myGalleryModal">
        <a role="button" data-bs-target="#myGallery" data-bs-slide-to="1">
          <picture class="card-img img-fluid">
            <source srcset="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-2-thumb.jpg 1x">
            <img class="mw-100" src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-2.jpg" alt="University of Arizona Spring Fling">
          </picture>
        </a>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 px-min" data-bs-toggle="modal" data-bs-target="#myGalleryModal">
        <a role="button" data-bs-target="#myGallery" data-bs-slide-to="2">
          <picture class="card-img img-fluid">
            <source srcset="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-3-thumb.jpg 1x">
            <img class="mw-100" src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-3.jpg" alt="University graduate on stage wearing cap and gown">
          </picture>
        </a>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 px-min" data-bs-toggle="modal" data-bs-target="#myGalleryModal">
        <a role="button" data-bs-target="#myGallery" data-bs-slide-to="3">
          <picture class="card-img img-fluid">
            <source srcset="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-4-thumb.jpg 1x">
            <img class="mw-100" src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-4.jpg" alt="Ceiling tiles">
          </picture>
        </a>
      </div>
    </div>
    <!-- Modal -->
    <div id="myGalleryModal" class="modal fade az-gallery-modal" tabindex="-1" role="dialog" aria-label="Photo Gallery Modal" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen">
        <div class="modal-content text-bg-transparent-black">
          <div class="modal-header border-0">
            <button type="button" data-bs-theme="dark" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="myGallery" class="carousel slide az-gallery">
              <div class="carousel-inner h-100">
                <div class="carousel-item az-gallery-item active">
                  <div class="d-flex flex-column h-100">
                    <div class="carousel-image az-gallery-image">
                      <div class="h-100">
                        <img src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-1.jpg" class="h-100 w-100 object-fit-contain" alt="A hand holding a little mirror">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item az-gallery-item">
                  <div class="d-flex flex-column h-100">
                    <div class="carousel-image az-gallery-image">
                      <div class="h-100">
                        <img src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-2.jpg" class="h-100 w-100 object-fit-contain" alt="University of Arizona Spring Fling">
                      </div>
                    </div>
                    <div class="carousel-caption az-gallery-caption">
                      <h5 class="text-sky mt-0">Second slide label</h5>
                      <p class="mb-0">University of Arizona Spring Fling</p>
                    </div>
                  </div>
                </div>
                <div class="carousel-item az-gallery-item">
                  <div class="d-flex flex-column h-100">
                    <div class="carousel-image az-gallery-image">
                      <div class="h-100">
                        <img src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-3.jpg" class="h-100 w-100 object-fit-contain" alt="University graduate on stage wearing cap and gown">
                      </div>
                    </div>
                    <div class="carousel-caption az-gallery-caption">
                      <h5 class="text-sky mt-0">Third slide label</h5>
                      <p class="mb-0">University graduate on stage wearing cap and gown</p>
                    </div>
                  </div>
                </div>
                <div class="carousel-item az-gallery-item">
                  <div class="d-flex flex-column h-100">
                    <div class="carousel-image az-gallery-image">
                      <div class="h-100">
                        <img src="/arizona-bootstrap/main/docs/5.0/assets/img/photo-gallery-demo/gallery-img-4.jpg" class="h-100 w-100 object-fit-contain" alt="University of Arizona Spring Fling">
                      </div>
                    </div>
                    <div class="carousel-caption az-gallery-caption">
                      <h5 class="text-sky mt-0">Fourth slide label</h5>
                      <p class="mb-0">Ceiling tiles<br>This caption is multiple lines.<br>The image size should adjust automatically.</p>
                    </div>
                  </div>
                </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#myGallery" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#myGallery" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>