Bootstrap

Bootstrap Lesson 7: Create Responsive Image Gallery using Bootstrap

how to create responsive website using bootstrap

In the previous Bootstrap tutorial, we have introduced Bootstrap jumbotron, grid system, learned to create responsive forms, and discussed how to create a responsive navigation bar. Now in this knowledge bit, we are going to build a small project using what we have learned so far, and we learn to create the basic structure of the website and see that how we can create the responsive Image Gallery using Bootstrap.

Create Responsive Image Gallery using Bootstrap:

The first thing we need to do is create an HTML skeleton and then include Bootstrap CDN link in the <head>, jQuery CDN and Bootstrap CDN at the end of the body tag. Here is the code for our HTML skeleton below:

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Create Simple Website</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>

 

<!-- jQuery CDN -->

<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<!-- Bootstrap Js CDN -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>       

 

Now we need to create jumbotron, we have already discussed in the previous bootstrap tutorial that how we can create jumbotron using bootstrap. So to create jumbotron we need to create <div> with class jumbotron and then we will add an <h1> heading and <p> paragraph. To align jumbotron in the center container, we need to create another <div> with class container and put the jumbotron <div> content inside that <div>. Here is the code below:

 

<div class="container">

<div class="jumbotron">

<h1>The Photo Lab! </h1>

<p>Create a simple responsive website using Bootstrap</p>

</div>
</div>       

 

This is how our site would look like:

How to create Image Gallery using Bootstrap.

Now we are going to create responsive navigation menu bar using bootstrap, we have also learned to create responsive navbar menu in the previous bootstrap tutorial. So we are grabbing the navigation menu bar code from previous lesson examples. After grabbing code of navbar from previous bootstrap lesson this is how our site looks like:

 

Image Gallery using Bootstrap tutorial

 

Now let’s go ahead and include the responsive Photo gallery. To do that we need to create a row class <div> after jumbotron <div> inside container <div> and inside this row, we will create 4 units 3 grids. This is how we can do that:

 

<div class="container">

<div class="jumbotron">

<h1>The Photo Lab!</h1>

<p>Create a simple responsive website using Bootstrap</p>

</div>

<div class="row">

<div class="col-lg-4">Image 1</div>

<div class="col-lg-4">Image 1</div>

<div class="col-lg-4">Image 1</div>

</div>
</div>       

 

Creating an Image Gallery in Bootstrap

 

Placing the images:

You can notice we have got 3 column where we will place images. Now the next thing we will do is place images in these three columns. So we will place image tag rather than text and in the source, we will put the link to the image. In my case, I am using free images from Unsplash site. Here is the code for the Photo gallery:

 

<div class="row">

<div class="col-lg-4">

<img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=1500&q=80">

</div>

<div class="col-lg-4">

<img src="https://images.unsplash.com/photo-1496185106368-308ed96f204b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=311179da8759eec710bf17f4d795c95b&auto=format&fit=crop&w=1394&q=80">

</div>

<div class="col-lg-4">

<img src="https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixlib=rb-0.3.5&s=e35d05c48b6757a5e79b8e6b752f3033&auto=format&fit=crop&w=1490&q=80">

</div>
</div>   

 

This is how the output would look like:

 

Creating Image Gallery using Bootstrap

 

You can notice that the images is huge and do not have proper border and size. So to fix this problem we need to add a little bit more bootstrap. We will add the image tag inside the class thumbnail <div> and whatever image will be placed inside that div will be scaled down to fit inside the column. Here is the demonstration below:

 

<div class="row">

<div class="col-lg-4">

<div class="thumbnail">

<img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=1500&q=80">

</div>

</div>

<div class="col-lg-4">

<div class="thumbnail">

<img src="https://images.unsplash.com/photo-1496185106368-308ed96f204b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=311179da8759eec710bf17f4d795c95b&auto=format&fit=crop&w=1500&q=80">

</div>

</div>

<div class="col-lg-4">

<div class="thumbnail">

<img src="https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixlib=rb-0.3.5&s=e35d05c48b6757a5e79b8e6b752f3033&auto=format&fit=crop&w=1500&q=80">

</div>
</div>
</div>      

After including class thumbnail this is how our site would look like:

 

Including thumbnail to responsive image gallery

 

Copying the class row:

Now let’s copy this class row <div> and paste two times for 9 different images on site. Here is how the site would look like:

 

 

 

So, this is how we can create Photo gallery website. Now make this site responsive, to make responsive we will add bootstrap classes like col-md-6 for medium size screen and after adding this class only two images will appear on the single row on medium size screen. This is how our site would look like on medium size screen:

 

 

And if we want same for small resolution screen like want two images appear on small size screen then we add another class col-sm-6. This class will adjust the size of photo gallery according to screen resolution. Here is code below for making image gallery grid responsive.  Here is the code below for medium and small size screen resolution image gallery:

 

<div class="container">
<div class="jumbotron">
<h1>The Photo Lab!</h1>
<p>Create a simple responsive website using Bootstrap</p>
</div>
 

<div class="row">

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1496185106368-308ed96f204b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=311179da8759eec710bf17f4d795c95b&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixlib=rb-0.3.5&s=e35d05c48b6757a5e79b8e6b752f3033&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1496185106368-308ed96f204b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=311179da8759eec710bf17f4d795c95b&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixlib=rb-0.3.5&s=e35d05c48b6757a5e79b8e6b752f3033&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1315ac6ca5cc07e38a83dbacef90dce&auto=format&fit=crop&w=1500&q=80">
</div>
</div> 

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1496185106368-308ed96f204b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=311179da8759eec710bf17f4d795c95b&auto=format&fit=crop&w=1500&q=80">
</div>
</div>

<div class="col-md-6 col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixlib=rb-0.3.5&s=e35d05c48b6757a5e79b8e6b752f3033&auto=format&fit=crop&w=1500&q=80">
</div>
</div>
</div>

</div>      

 

And this is how our site would behave on small resolution screen:

Creating simple website using bootstrap

 

And on the extra small screen, the single images will take up all the 12 units. So only one image will appear on a row. Here is the illustration of the output below:

 

Conclusion:

This bootstrap tutorial was a review what we have learned so far, in this knowledge bit, we have learned that how we can create responsive Image Gallery using Bootstrap. We have seen that how we can create jumbotron, hamburger button, responsive navbar, and responsive grid system. In the upcoming lesson, we will see that how we can style this photo gallery and how to include font’s library.

2 Comments

Most Popular

To Top