Gallery

<!-- Image gallery -->
<div class="cz-gallery">
  <a href="path-to-large-image" class="gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery image caption</span>
  </a>
</div>

// Image gallery
.cz-gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.gallery-item-caption Gallery image caption

<!-- Video gallery -->
<div class="cz-gallery">
  <a href="link-to-youtube/vimeo-video" class="gallery-item video-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery video caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery video caption</span>
  </a>
</div>

// Video gallery
.cz-gallery
  a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="font-size-sm text-light">Gallery video caption</h6>').gallery-item.video-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.gallery-item-caption Gallery video caption

<!-- Iframe (Google map) -->
<div class="cz-gallery">
  <a href="link-to-google-map-embed" class="gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Google map embed</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Google map embed</span>
  </a>
</div>

// Iframe (Google map)
.cz-gallery
  a(href="link-to-google-map-embed", data-sub-html='<h6 class="font-size-sm text-light">Google map embed</h6>').gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.gallery-item-caption Google map embed

<!-- Gallery grid with gutters -->
<div class="row cz-gallery">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    <a href="path-to-large-image" class="gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    ....
  </div>

  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid with gutters
.row.cz-gallery

  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').gallery-item.rounded-lg
      +image("path-to-thumbnail-image", "Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    ...

  //- Add as many columns with gallery item inside as you need

<!-- Gallery grid no gutters -->
<div class="row cz-gallery no-gutters">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    ....
  </div>
  
  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid no gutters
.row.cz-gallery.no-gutters

  //- Item
  .col-xl-4.col-sm-6
    a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').gallery-item
      +image("path-to-thumbnail-image", "Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6
    ...

  //- Add as many columns with gallery item inside as you need

<!-- Gallery inside card -->
<div class="card cz-gallery">
  <a href="path-to-large-image" class="gallery-item card-img-top" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
  </a>
  <div class="card-body">
    <h5 class="card-title">Card with gallery thumbnail</h5>
    <p class="card-text font-size-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Gallery inside card
.card.cz-gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
  .card-body
    h5.card-title
      | Card with gallery thumbnail
    p.card-text.font-size-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

<!-- Gallery inside carousel  -->
<div class="cz-carousel cz-dots-enabled cz-gallery">
  <div class="cz-carousel-inner" data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}'>

    <!-- Item -->
    <div>
      <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
        <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        <span class="gallery-item-caption">Gallery image caption</span>
      </a>
    </div>

     <!-- Add as many gallery items wrapped in divs as you need -->
  </div>
</div>

// Gallery inside carousel
.cz-carousel.cz-dots-enabled.cz-gallery
  .cz-carousel-inner(data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}')

    //- Item
    div
      a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').gallery-item.rounded-lg
        +image("path-to-thumbnail-image", "Gallery thumbnail")
        span.gallery-item-caption Gallery image caption
    
    //- Add as many gallery items wrapped in divs as you need