How To Create Photo Gallery using Bootstrap

Hello Guys in this article we are discuss about Bootstrap and we are going to teach you How to create Photo Gallery using Bootstrap. Bootstrap is a good start to create Photo gallery design, images is very common in modern web design so styling images and placing it properly on the webpages. Different classes of the bootstrap grid system is used to make the Photo Gallery. I have also used Light box plugin to show specific image with zoom.

Photo Gallery

1. Navbar with Search Box
2. Image Slider.
3. Thumbnail Links For each image with Modal.
4. Thumbnail Links For each image with Light Box Plugin.

Navbar with Search Box

Next step is creating Navbar with Search box using Bootstrap.

<nav class="navbar navbar-inverse ">
		<div class="container">
			<div class="navbar-header">
				<div class="navbar-brand">
					Photo Gallary
				</div>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="index.html">Home</a></li>
					<li><a href="nature.html">Nature Photo</a></li>
					<li><a href="animal.html">Animals Photo</a></li>
				</ul>
			</div>
			<form class="navbar-form navbar-right" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search Images">
  </div>
  <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>Search</button>
</form>
		</div>
	</nav>

Image Slider

Next step is creating Slider. and we are use 4 images for sliding each images in slider. copy and paste below code.

<div class="row">
		<div class="col-md-10 col-md-offset-1">
			<div class="carousel slide" data-ride="carousel" id="slider">
				<ol class="carousel-indicators">
					<li data-target="#slider" data-slide-to="0" class="active"></li>
					<li data-target="#slider" data-slide-to="1"></li>
					<li data-target="#slider" data-slide-to="2"></li>
					<li data-target="#slider" data-slide-to="3"></li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/slide1.jpg">
						
					</div>
					<div class="item">
						<img src="img/slide2.jpg">
					</div>
					<div class="item">
						<img src="img/slide3.jpg">
					</div>
					<div class="item">
						<img src="img/slide4.jpg">
					</div>
				</div>
				<a href="#slider" data-slide="prev" class="left carousel-control">
				<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a href="#slider" data-slide="next" class="right carousel-control">
				<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div>	
		</div>

Thumbnail Links For each image with Modal

in this step we are going to create show images in thumbnail size and link it modal. modal means when click thumbnail image will open in full size.

<div class="col-md-4">
	<a href="#th1" data-toggle="modal" class="thumbnail">
		<img src="img/th1.jpg">
	</a>
	<div class="modal fade" id="th1">
		<div class="modal-dialog">
		<div class="modal-content">
		<div class="modal-header">
		Image 1
		</div>
		<div class="modal-body">
			<img src="img/th1.jpg" class="img-thumbnail">
		</div>
		<div class="modal-footer">This is First Image </div>
	</div>
	</div>
</div>
</div>

Thumbnail Links For each image with Light Box Plugin

in this step we are going to integrate light box plugin in this source code. Light box plugin means when click any image, image will open in full size box  and you can navigate like next previous control. You can find light box code when download complete Source Code after clicking Download Now Button Below The Article.

<div class="row">
		<h3 class="alert alert-success">Nature Photo Gallary</h3>
			<div class="col-md-4">
				<a href="img/th1.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th1.jpg">
				</a>
				
			</div>

			<div class="col-md-4">
				<a href="img/th2.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th2.jpg">
				</a>
				
			</div>

			<div class="col-md-4">
				<a href="img/th3.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th3.jpg">
				</a>
				
			</div>

			<div class="col-md-4">
				<a href="img/th4.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th4.jpg">
				</a>
				
			</div>

			<div class="col-md-4">
				<a href="img/th5.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th5.jpg">
				</a>
				
			</div>

			<div class="col-md-4">
				<a href="img/th6.jpg" data-lightbox="gallary" class="thumbnail">
					<img src="img/th6.jpg">
				</a>
				
			</div>

			
		</div>

Preview

You can Download Complete Source Code Here . Thank .

Download Source Code