Right now, we'll learn about how to replace the navbar brand with your own image by swapping the text for an image. Because navbar-brand has its own size of height and padding, because of that if the image size is too high, it can cause navigation bar into a mess.
By using existing source code in the previous tutorial : "Tutorial bootstrap about changing the color of navigation bar, we'll add navbar brand with an image as shown by the following script :
So, the output will be shown by following figure :
You can see the output above (Figure.1), if height of an image is not balance with navigation bar's heigh then the desired output look less responsive.So how is the way to make an image can adapt the size of navigation bar .Look at the experiment 2 to get the answer.
Add the following script to make an image of navbar brand can adapt with the size of navigation bar.
The output of css script above will be show by following figure.2 :
You can download source code of the entire tutorial on: