This tutorial will help you to create responsive, logo, menu and banner using bootstrap. Follow the steps given below to complete the tutorial.
Steps:
1. Create an html file and add nav tag and navbar class
<nav class="navbar">
</nav>
2. Add div tag with container class and add a tag to add logo using navbar-brand class
<div class="container">
<a class="navbar-brand" href="#">Tutorial4urHelp</a>
</div>
3. Add a div tag with navbar-header class and add ul tag with nav and navbar-nav class within this div to create menu.
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
4. To change the looks add navbar-default class in nav tag. Add role attribute in nav tag to act it as navigation.
5. To remove the left space, change the container class of div to container-fluid class.
6. Add navbar-right class in second div to change the menu position to right.
7. Add dropdown menu after Contact menu item.
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" >Dropdown<b class="caret" > </b> </a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
8. Add divider before Link 4 menu item using divider class.
<li class="divider"><a href="#"></a></li>
9. To make the nav bar responsive add collapse and navbar-collapse classes to the second div, remove navbar-header class from the second div and id attribute with the value bs-navbar-collapse-1. 10. Add another div after the first div with nabvar-header class.
11. Add button tag with navbar-toggle class, data-toggle attribute with collapse and data-target attribute with above id value.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
</button>
12. Add the following script inside button tag to add icon for small device.
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
13. Change logo text by logo image.
<img src="logo.PNG" />
14. Create a css file to add the following custom css code.
.zero-padding{
padding:0;
margin:0;
}
15. Add link for the css file in the html document (must add after bootstrap.min.css file link) and add the class zero-padding in the <a> tag.
16. Add navbar-static-top class to nav tag to change the navbar shape.
17. Add div tag with page-header class and img tag with img-responsive class to add cover image.
18. Add zero-padding class to top div tag to remove margin and padding.
19. Now, check the look of the page in the browser.
You van follow the following video tutorial to complete the steps of this tutorial.
ve