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.