Bootstrap Image Gallery Archives - csshint - A designer hub https://csshint.com/tag/bootstrap-image-gallery/ Sat, 18 Feb 2023 19:28:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 18+ Bootstrap Image Gallery Examples https://csshint.com/bootstrap-image-gallery/ Sat, 19 Sep 2020 07:17:14 +0000 http://csshint.com/?p=3779 Latest Collection of hand-picked free Bootstrap Image Gallery , image gallery bootstrap Code Examples for Web Design. 1. Image gallery with bootstrap 4 Author Cirmar Made with HTML / CSS demo and code Get Hosting 2. Gallery hover effect + Gallery expanded Author Arthur Camara Made with HTML (Pug) / CSS (Stylus) / JS (Babel) […]

The post 18+ Bootstrap Image Gallery Examples appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free Bootstrap Image Gallery , image gallery bootstrap Code Examples for Web Design.

1. Image gallery with bootstrap 4

Image gallery with bootstrap 4

Image gallery with bootstrap 4


Author

  • Cirmar

Made with

  • HTML / CSS

demo and code Get Hosting

2. Gallery hover effect + Gallery expanded

Gallery hover effect

Gallery hover effect


Author

  • Arthur Camara

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

demo and code Get Hosting

3. Pure CSS albums gallery

Pure CSS albums gallery

Pure CSS albums gallery


Author

  • Renaud Tertrais

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

4. Bootstrap photo Gallery

Bootstrap photo Gallery

Bootstrap photo Gallery


Author

  • Mosfiqur Rahman

Made with

  • HTML / CSS / JS

demo and code Get Hosting

5. Bootstrap Lightbox Image Gallery

Bootstrap Lightbox Image Gallery

Bootstrap Lightbox Image Gallery


Author

  • Patrycja

Made with

  • HTML / CSS / JS

demo and code Get Hosting

6. 3D Gallery

Author

  • 루세나 (Lucena)

Made with

  • HTML (Haml) / CSS / JS

demo and code Get Hosting

7. Image Gallery Bootstrap with Isotope

Author

  • Alahab

Made with

  • HTML / CSS (SCSS) / JS

demo and code Get Hosting

8. thumbnail gallery modal view

thumbnail gallery modal view

thumbnail gallery modal view


Author

  • NMonst4

Made with

  • HTML / CSS / JS

demo and code Get Hosting

9. Image Gallery – Bootstrap

Image Gallery Bootstrap

Image Gallery Bootstrap


Author

  • Jaskiran Chhokar

Made with

  • HTML / CSS

demo and code Get Hosting

10. Responsive Image Gallery – Bootstrap 4

Author

  • Monika Patel

Made with

  • HTML / CSS

demo and code Get Hosting

11. Bootstrap gallery

Author

  • Dash Bouquet

Made with

  • HTML / CSS

demo and code Get Hosting

12. 3D Carousel Gallery Concept

Author

  • Joshua Young

Made with

  • HTML / CSS / JS

demo and code Get Hosting

13. 3D Cube Image Gallery

Author

  • George W. Park

Made with

  • HTML / CSS / JS (Babel)

demo and code Get Hosting

14. Responsive Image Gallery (Bootstrap)

Author

  • Bruno M.

Made with

  • HTML / CSS / JS

demo and code Get Hosting

15. Photo Gallery Using Bootstrap 4

Photo Gallery Using Bootstrap 4

Photo Gallery Using Bootstrap 4


Author

  • dipendra

Made with

  • HTML / CSS / JS

demo and code Get Hosting

16. Hover card effect + gallery image

Hover card effect gallery image

Hover card effect gallery image


Author

  • ravi7284007

Made with

  • HTML / CSS

demo and code Get Hosting

17. Bootstrap HTML Image Gallery Grid System

Bootstrap HTML Image Gallery Grid System

Bootstrap HTML Image Gallery Grid System


Author

  • mobirise

Made with

  • HTML / CSS / JS

demo and code Get Hosting

18. LightGallery using jQuery

LightGallery using jQuery

LightGallery using jQuery


Author

  • Siddharth Panchal

Made with

  • HTML / CSS / JS

demo and code Get Hosting

The post 18+ Bootstrap Image Gallery Examples appeared first on csshint - A designer hub.

]]> Pure CSS Bootstrap Image Gallery https://csshint.com/css-bootstrap-image-gallery/ Tue, 04 Aug 2020 10:36:19 +0000 http://csshint.com/?p=3045 if you are looking for Pure CSS Bootstrap Image Gallery without any javascript then you are in right place. because in this post we are going to show how to create Bootstrap Image Gallery using css. HTML [code language=”html”] <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" […]

The post Pure CSS Bootstrap Image Gallery appeared first on csshint - A designer hub.

]]> if you are looking for Pure CSS Bootstrap Image Gallery without any javascript then you are in right place. because in this post we are going to show how to create Bootstrap Image Gallery using css.

CSS Bootstrap Image Gallery

Demo : CSS Bootstrap Image Gallery


HTML

[code language=”html”]
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/LeshikJanz/libraries/master/Bootstrap/baguetteBox.min.css">

<title>Freebie: 4 Bootstrap Gallery Templates</title>
</head>
<body>

<div class="container gallery-container">

<h1>Bootstrap 3 Gallery</h1>

<p class="page-description text-center">Fluid Layout With Overlay Effect</p>

<div class="tz-gallery">

<div class="row">

<div class="col-sm-12 col-md-4">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="Bridge">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg" alt="Tunnel">
</a>
</div>
<div class="col-sm-12 col-md-8">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg" alt="Rails">
</a>
</div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run(‘.tz-gallery’);
</script>
</body>
</html>
[/code]

CSS

[code language=”css”]
body {
background-color: #434c50;
min-height: 100vh;
font: normal 16px sans-serif;
padding: 40px 0;
}

.container.gallery-container {
background-color: #fff;
color: #35373a;
min-height: 100vh;
padding: 30px 50px;
}

.gallery-container h1 {
text-align: center;
margin-top: 50px;
font-family: ‘Droid Sans’, sans-serif;
font-weight: bold;
}

.gallery-container p.page-description {
text-align: center;
margin: 25px auto;
font-size: 18px;
color: #999;
}

.tz-gallery {
padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
padding: 2px;
}

.tz-gallery .lightbox img {
width: 100%;
border-radius: 0;
position: relative;
}

.tz-gallery .lightbox:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
color: #fff;
font-size: 26px;
font-family: ‘Glyphicons Halflings’;
content: ‘\e003’;
pointer-events: none;
z-index: 9000;
transition: 0.4s;
}

.tz-gallery .lightbox:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(46, 132, 206, 0.7);
content: ”;
transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
opacity: 1;
}

.baguetteBox-button {
background-color: transparent !important;
}

@media(max-width: 768px) {
body {
padding: 0;
}
}
[/code]

Bootstrap gallery

The post Pure CSS Bootstrap Image Gallery appeared first on csshint - A designer hub.

]]>