Gallery

Angular Bootstrap Gallery - free examples, templates & tutorial

Responsive Angular galleries created with Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, & more.

Static images

An example with the usage of static images.

To learn more read Images Docs.

Show code Edit in sandbox

HTML
Typescript

        
            
        <!--Main Navigation-->
        <header>
          <!-- Animated navbar-->
          <nav
            class="navbar navbar-expand-lg fixed-top navbar-scroll"
            [class.navbar-scrolled]="navbarScrolled"
          >
            <div class="container-fluid">
              <button
                class="navbar-toggler"
                type="button"
                (click)="animatedNavbarExample2.toggle()"
                aria-controls="animatedNavbarExample2"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span class="navbar-toggler-icon d-flex justify-content-start align-items-center">
                  <i class="fas fa-bars"></i>
                </span>
              </button>
              <div
                mdbCollapse
                #animatedNavbarExample2="mdbCollapse"
                class="collapse navbar-collapse"
                id="animatedNavbarExample2"
              >
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item active">
                    <a class="nav-link" aria-current="page" href="#intro">Home</a>
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link"
                      href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                      rel="nofollow"
                      target="_blank"
                      >Learn Bootstrap 5</a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank"
                      >Download MDB UI KIT</a
                    >
                  </li>
                </ul>

                <ul class="navbar-nav flex-row">
                  <!-- Icons -->
                  <li class="nav-item">
                    <a
                      class="nav-link pe-2"
                      href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                      rel="nofollow"
                      target="_blank"
                    >
                      <i class="fab fa-youtube"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link px-2"
                      href="https://www.facebook.com/mdbootstrap"
                      rel="nofollow"
                      target="_blank"
                    >
                      <i class="fab fa-facebook-f"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link px-2"
                      href="https://twitter.com/MDBootstrap"
                      rel="nofollow"
                      target="_blank"
                    >
                      <i class="fab fa-twitter"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link ps-2"
                      href="https://github.com/mdbootstrap/mdb-ui-kit"
                      rel="nofollow"
                      target="_blank"
                    >
                      <i class="fab fa-github"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <!-- Animated navbar -->

          <!-- Background image -->
          <div
            id="intro"
            class="bg-image"
            style="
              background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp);
              height: 100vh;
            "
          >
            <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8)">
              <div class="container d-flex align-items-center text-center h-100">
                <div>
                  <h1 class="mb-5">This is title</h1>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae laboriosam
                    numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non accusamus
                    maxime, magni nulla quasi iste ipsa architecto? Autem!
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- Background image -->
        </header>
        <!--Main Navigation-->

        <div class="container my-5">
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam minima perspiciatis eos
            tenetur. Praesentium dolores at quos aperiam sed, sint provident consectetur incidunt, nostrum
            porro earum commodi, ex architecto.
          </p>
        </div>

        
            

        import { Component, OnInit } from '@angular/core';
        import { fromEvent } from 'rxjs';
        
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss']
        })
        export class AppComponent implements OnInit {
          constructor() {}
        
          navbarScrolled = false;
        
          ngOnInit(): void {
            fromEvent(window, 'scroll').subscribe(() => {
              if (window.scrollY > 0) {
                this.navbarScrolled = true;
              } else {
                this.navbarScrolled = false;
              }
            });
          }
        }

Carousel / Slider

Carousel (also called "slider") is a slideshow cycling through different elements such as photos, videos, or text.

To learn more read Carousel Docs.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.