<!-- Gallery with gutters -->
<div class="row">
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item mb-grid-gutter" data-fancybox="gallery1" data-options='{"caption": "Gallery image caption #1"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-video" class="gallery-item video-item mb-grid-gutter" data-fancybox="gallery1" data-width="1000" data-height="563" data-options='{"caption": "Gallery image caption #2"}'>
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="play"></i>
</div>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">I'm gallery caption</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item mb-grid-gutter" data-fancybox="gallery1" data-options='{"caption": "Gallery image caption #3"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item mb-grid-gutter" data-fancybox="gallery1" data-options='{"caption": "Gallery image caption #4"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
</div>// Gallery with gutters
.row
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery1", data-options='{"caption": "Gallery image caption #1"}').gallery-item.mb-grid-gutter
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
.col-sm-6
a(href="path-to-video", data-fancybox="gallery1", data-width="1000", data-height="563", data-options='{"caption": "Gallery image caption #2"}').gallery-item.video-item.mb-grid-gutter
.gallery-indicator
i(data-feather="play").gallery-indicator-icon
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption I'm gallery caption
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery1", data-options='{"caption": "Gallery image caption #3"}').gallery-item.mb-grid-gutter
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery1", data-options='{"caption": "Gallery image caption #4"}').gallery-item.mb-grid-gutter
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
<!-- Gallery no gutters -->
<div class="row no-gutters">
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery2" data-options='{"caption": "Gallery image caption #1"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-video" class="gallery-item video-item" data-fancybox="gallery2" data-width="1000" data-height="563" data-options='{"caption": "Gallery image caption #2"}'>
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="play"></i>
</div>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">I'm gallery caption</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery2" data-options='{"caption": "Gallery image caption #3"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
<div class="col-sm-6">
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery2" data-options='{"caption": "Gallery image caption #4"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>
</div>// Gallery no gutters
.row.no-gutters
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery2", data-options='{"caption": "Gallery image caption #1"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
.col-sm-6
a(href="path-to-video", data-fancybox="gallery2", data-width="1000", data-height="563", data-options='{"caption": "Gallery image caption #2"}').gallery-item.video-item
.gallery-indicator
i(data-feather="play").gallery-indicator-icon
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption I'm gallery caption
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery2", data-options='{"caption": "Gallery image caption #3"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
.col-sm-6
a(href="path-to-large-image", data-fancybox="gallery2", data-options='{"caption": "Gallery image caption #4"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
<!-- Gallery inside carousel -->
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "center": true, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }'>
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery3" data-options='{"caption": "Gallery image caption #1"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
<a href="path-to-video" class="gallery-item video-item" data-fancybox="gallery3" data-width="1000" data-height="563" data-options='{"caption": "Gallery image caption #2"}'>
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="play"></i>
</div>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">I'm gallery caption</div>
</a>
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery3" data-options='{"caption": "Gallery image caption #3"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
<a href="path-to-large-image" class="gallery-item" data-fancybox="gallery3" data-options='{"caption": "Gallery image caption #4"}'>
<img src="path-to-small-image" alt="Gallery image">
<div class="gallery-caption">
<div class="gallery-indicator">
<i class="gallery-indicator-icon" data-feather="zoom-in"></i>
</div>
I'm gallery caption
</div>
</a>
</div>// Gallery inside carousel
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "center": true, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }')
a(href="path-to-large-image", data-fancybox="gallery3", data-options='{"caption": "Gallery image caption #1"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
a(href="path-to-video", data-fancybox="gallery3", data-width="1000", data-height="563", data-options='{"caption": "Gallery image caption #2"}').gallery-item.video-item
.gallery-indicator
i(data-feather="play").gallery-indicator-icon
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption I'm gallery caption
a(href="path-to-large-image", data-fancybox="gallery3", data-options='{"caption": "Gallery image caption #3"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption
a(href="path-to-large-image", data-fancybox="gallery3", data-options='{"caption": "Gallery image caption #4"}').gallery-item
img(src="path-to-small-image", alt="Gallery image")
.gallery-caption
.gallery-indicator
i(data-feather="zoom-in").gallery-indicator-icon
| I'm gallery caption