Bootstrap

Bootstrap Lesson 8: Designing Photo Gallery website using Bootstrap

Bootstrap Create responsive website

In the previous bootstrap tutorial, we have seen that how we can create a responsive photo gallery website. This tutorial is linked with the previous tutorial, in this lesson, we will see that how we can change the styling of photo gallery website using bootstrap. We will also learn that how we can include fonts like Glyphicons and AwesomeFonts icons on our site.

Designing Photo Gallery website using Bootstrap:

In the previous lesson, we have created a responsive photo gallery site, now we will be styling that site, the first thing we want to do is change the navigation bar color. You can see in the following screenshot that we have default white color bootstrap navigation bar:

 

Designing Photo Gallery website using Bootstrap

 

If we want to change the color of navigation bar menu to black then we can use bootstrap class navbar-inverse instead of class navbar-default. To do that we need to change navbar-default to navbar-inverse.

 

<nav class="navbar navbar-inverse">…..</nav>

 

How to make Photo Gallery website using Bootstrap

 

.navbar-inverse

And if we want some other color then we can include CSS in our site. to change navbar color we will select the navigation menu bar class, you can either select navbar, navbar-inverse, or navbar-fixed-top. In my case, I am selecting the navbar-inverse class and then change the background color.

 

.navbar-inverse {

background: #232945;
}       

 

After changing color this is how our navigation bar would look like.

 

Bootstrap tutorial Photo gallery website using bootstrap

 

Right now we have gray color navigation bar content color, if we want to change the content color of navigation bar then we use class this way “.navbar-inverse .navbar-nav>li>a” because this class is more specific then anchor <a> tag. If we use anchor tag <a> to change the color then it will override by class “.navbar-inverse .navbar-nav>li>a”.

 

.navbar-inverse .navbar-nav>li>a {

color: white;
}       

 

 

You can notice that we have the grayish color logo “PhotoLab”, if we want to change it to white then we use class .navbar-inverse .navbar-brand and will not use the .navbar-brand class only because .navbar-inverse .navbar-brand will override the properties of .navbar-brand. Here is the CSS below:

 

.navbar-inverse .navbar-brand {

color: white;
}       

 

navbar-inverse bootstrap

 

jumbotron:

Now if we want to change the color of jumbotron then we will select the class jumbotron and then we will select the color that we want. Here is the code below where we changing the background and text color:

 

.jumbotron {

color: #232945;

background-color: #c8c6d1;
}       

 

This is how the site would look like:

 

 

The last thing I am going to do is to add some icon like an icon on the brand name before “PhotoLab” text, an Image icon before “The Photo Lab” text and icons after login and sign up button. I am using fontAwesome.com fonts this site have around 3,000 fonts on their site. To use fonawesome fonts, the first thing we need to do is to install that font. We will include the FontAwesome library in the head of our site. Here is the code for the Font Awesome library just include that code in your head file:

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">      

 

Now, what if we want to add a logo just before “The Photo Lab” text?. We will include the following text before the text inside the <h1> tag.

 

<i class="fas fa-image"></i>       

 

bootstrap tutorial, Bootstrap custom class

 

fa-camera-retro

If we want a retro logo before “PhotoLab” text then we add the following before the text “PhotoLab”.

 

<i class="fas fa-camera-retro"></i>      

 

 

Similarly, we can add sign up and login logo in a similar way. Just go to icons on font awesome site and click on the logo you want to use copy the code and paste on your site where you want to use.

<!—Sing Up Logo -->
<i class="fas fa-user-plus"></i>

<!—Login Logo -->
<i class="fas fa-sign-in-alt"></i>       

Just include these code after signup and login text. Here is how our site looks like:

 

 

Conclusion:

In this bootstrap tutorial, we have studied that how we can change the style of our site like colors, text, etc. We have also introduced FontAwesome fonts library and discussed that how we can include in our project. We have learned how we can create a photo gallery website using bootstrap.

Click to comment

Most Popular

To Top