Galerie

Bootstrap Galerie - kostenlose Beispiele, Vorlagen & Tutorial

Responsive Galerien erstellt mit Bootstrap 5. Bildergalerie, Videogalerie, Fotogalerie, Vollbild, E-Commerce, Lightbox, Slider, Thumbnails und mehr.

Statische Bilder

Ein Beispiel für die Verwendung von statischen Bildern.

Um mehr zu erfahren, lesen Sie Bilder Dokumentation.

Show code Edit in sandbox

HTML

<!-- Gallery -->
<div class="row">
  <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Wintry Mountain Landscape"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Mountains in the Clouds"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Waves at Sea"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Yosemite National Park"
    />
  </div>
</div>
<!-- Gallery -->

Karussell / Slider

Ein Karussell (auch "Slider" genannt) ist eine Diashow, die verschiedene Elemente wie Fotos, Videos oder Texte durchläuft.

Um mehr zu erfahren, lesen Sie Karussell Dokumentation.

Erste Folienbeschriftung

Nulla vitae elit libero, a pharetra augue mollis interdum.

Zweite Folienbeschriftung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dritte Folienbeschriftung

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML

<!-- Carousel wrapper -->
<div
  id="carouselBasicExample"
  data-mdb-carousel-init class="carousel slide carousel-fade"
  data-mdb-ride="carousel"
>
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Slide 1"
    ></button>
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="1"
      aria-label="Slide 2"
    ></button>
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="2"
      aria-label="Slide 3"
    ></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
        class="d-block w-100"
        alt="Sunset Over the City"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>Erste Folienbeschriftung</h5>
        <p>
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
        class="d-block w-100"
        alt="Canyon at Night"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>Zweite Folienbeschriftung</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
        class="d-block w-100"
        alt="Cliff Above a Stormy Sea"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>Dritte Folienbeschriftung</h5>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        </p>
      </div>
    </div>
  </div>
  <!-- Inner -->

  <!-- Controls -->
  <button data-mdb-button-init
    class="carousel-control-prev"
    type="button"
    data-mdb-target="#carouselBasicExample"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorherige</span>
  </button>
  <button data-mdb-button-init
    class="carousel-control-next"
    type="button"
    data-mdb-target="#carouselBasicExample"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Nächste</span>
  </button>
</div>
<!-- Carousel wrapper -->

Mehrteiliger Karussell

Durch die Verwendung einer Kombination aus verfügbaren Klassen können Sie ein Karussell mit mehreren Elementen auf jeder Folie erstellen.

Wenn Sie erweiterte Optionen und Beispiele für ein mehrteiliges Karussell benötigen, werfen Sie einen Blick auf die Multi-item Carousel Dokumentation.