HTML code
This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 4.5.0 included, to get the result that you can see in the preview selection
Download<div role="main" class="page-content container container-plus">
<div class="page-header border-0">
<h1 class="page-title text-dark-m3 text-140">
With PhotoSwipe for lightbox
</h1>
</div>
<div class="text-center mb-2">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-bgc-white btn-light btn-h-light-green btn-a-green btn-text-dark btn-h-text-dark px-3">
<input type="radio" name="tags" checked="">
Nature
</label>
<label class="btn btn-bgc-white btn-light btn-h-light-blue btn-a-blue btn-text-dark btn-h-text-dark px-3">
<input type="radio" name="tags">
City Life
</label>
<label class="btn btn-bgc-white btn-light btn-h-light-purple btn-a-purple btn-text-dark btn-h-text-dark px-3 active">
<input type="radio" name="tags">
Nutrition
</label>
</div>
</div>
<div class="bcard py-3 mt-3" id="gallery">
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="row mx-0 justify-content-center">
<!-- put images in 3 columns -->
<!-- column 1 -->
<div class="col-6 col-sm-4 col-md-3 text-center px-2">
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-brown-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 1" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb9.jpg" class="w-100 d-zoom-2 " data-size="1200x800">
</a>
<div class="v-hover position-center h-100 w-100 bgc-dark-grad" style="pointer-events: none;"></div>
<div class="position-br text-right opacity-1 mr-2px mb-2px">
<span class="badge badge-primary">
breakfast
</span>
<br>
<span class="badge badge-warning">
fruits
</span>
<br>
<span class="badge badge-success">
diet
</span>
</div>
<a href="#" class="btn btn-white btn-h-yellow btn-a-yellow v-hover position-tr mt-1 mr-1 py-0 radius-1 border-0">
<span class="text-140 text-600">+</span>
</a>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-green-m3">
<img alt="Gallery Image 2" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb2.jpg" class="w-100 " data-size="857x1200">
<div class="v-hover position-tl h-100 w-100 bgc-dark-grad" style="pointer-events: none;"></div>
<div class="v-hover position-center text-white-tp2">
<div>
<div class="text-110 text-600 mb-2">Click on the zoom icon</div>
<div class="action-buttons bgc-black-tp4 p-1 radius-1 text-125">
<a href="#" class="show-lightbox text-blue-m3 mx-1">
<i class="fa fa-search-plus"></i>
</a>
<a href="#" class="text-danger-m3 mx-1">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="text-success-m3 mx-1">
<i class="fa fa-arrow-down"></i>
</a>
</div>
</div>
</div>
<a href="#" class="v-hover position-bl p-2 text-white text-600 no-underline">
<img alt="User avatar" src="assets/image/avatar/avatar4.jpg" width="36" class="align-middle radius-round border-2 brc-white-tp1 shadow-sm mr-1">
<span class="align-middle">
Alexa
</span>
</a>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-primary-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 3" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb5.jpg" class="w-100 d-zoom-2 " data-size="675x1200">
</a>
<div class="mt-hover position-tl w-100 bgc-black-tp5 p-25">
<div class="d-flex justify-content-center action-buttons text-110">
<a href="#" class="mx-2">
<i class="fa fa-link text-success-m2"></i>
</a>
<a href="#" class="mx-2">
<i class="fa fa-pen text-orange-m1"></i>
</a>
<a href="#" class="mx-2">
<i class="fa fa-times text-danger-m2"></i>
</a>
</div>
</div>
</div>
</div>
<!-- column 2 -->
<div class="col-6 col-sm-4 col-md-3 text-center px-2">
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-default-m3">
<img alt="Gallery Image 4" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb4.jpg" class="w-100 " data-size="800x1200">
<div class="v-hover position-center text-white-tp2 p-2 radius-1 bgc-black-tp7">
Click on the zoom icon
</div>
<div class="mt-hover position-tl w-100 bgc-black-tp4 p-25">
<div class="d-flex justify-content-center action-buttons text-110">
<a href="#" class="show-lightbox mx-2">
<i class="fa fa-search-plus text-blue-l3"></i>
</a>
<a href="#" class="mx-2">
<i class="fa fa-paperclip text-white"></i>
</a>
<a href="#" class="mx-2">
<i class="fa fa-pen text-purple-m3"></i>
</a>
<a href="#" class="mx-2">
<i class="far fa-trash-alt text-danger-l2"></i>
</a>
</div>
</div>
<a href="#" class="mb-hover position-br p-2 bgc-success-tp4 m-1 radius-1 text-white text-600 no-underline">
<img alt="User avatar" src="assets/image/avatar/avatar4.jpg" width="36" class="align-middle radius-round border-2 brc-white-tp2 shadow-sm mr-1">
<span class="align-middle">
Alexa
</span>
</a>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-warning-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 5" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb1.jpg" class="w-100 " data-size="1200x857">
</a>
<div class="v-hover position-center h-100 w-100 bgc-brown-tp4" style="pointer-events: none;"></div>
<div class="v-hover position-br w-100 bgc-black-tp6 py-2 text-white-tp2 d-flex align-items-center justify-content-center">
<div class="text-105 mb-2">
Some Caption!
</div>
</div>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-secondary-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 6" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb8.jpg" class="w-100 d-zoom-2 " data-size="960x1200">
</a>
</div>
</div>
<!-- column 3 -->
<div class="col-6 col-sm-4 col-md-3 text-center px-2">
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-dark-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 7" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb7.jpg" class="w-100 d-zoom-3 " data-size="800x1200">
</a>
<div class="v-hover position-center h-100 w-100 bgc-light-grad" style="pointer-events: none;"></div>
<div class="position-bc text-right opacity-1 mb-15">
<span class="badge badge-lg bgc-warning-tp3 text-dark-tp2">
moonstruck
</span>
</div>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-purple-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 8" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb6.jpg" class="w-100 d-zoom-2 " data-size="1200x675">
</a>
<div class="mr-hover position-tr h-100 bgc-black-tp4 p-25">
<div class="d-flex flex-md-column justify-content-center action-buttons text-110">
<a href="#" class="my-2">
<i class="fa fa-pen text-white"></i>
</a>
<a href="#" class="my-2">
<i class="fa fa-times text-danger-l1"></i>
</a>
</div>
</div>
</div>
<div class="pos-rel d-style my-3 radius-1 shadow-sm overflow-hidden bgc-yellow-m3">
<a href="#" class="show-lightbox">
<img alt="Gallery Image 9" src="http://104.237.146.83/templates/ace/demo/assets/image/gallery/thumb3.jpg" class="w-100 d-zoom-2 " data-size="800x1200">
</a>
<div class="v-hover position-center h-100 w-100 bgc-dark-grad" style="pointer-events: none;"></div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.bcard -->
<!-- for Photoswipe -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</div>CSS code
This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 4.5.0 included, to get the result that you can see in the preview selection
Downloadbody{margin-top:20px;
background:#ddd;
}
.bcard {
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
border-radius: .25rem;
border-width: 0;
background-color: #fff;
position: relative;
}
About this bootstrap example/template
This example/template, card gallery, was published on Aug 15th 2020, 12:52 by Bootdey Admin and it is free.
We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.
We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.
This code example currectly have 694 views, Using this bootstrap snippet you have the following benefits:
Bootstrap 4.5.0
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
This code example is based on bootstrap 4.5.0 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working