In this post we are going to learn about few more navbar features in Bootstrap. In our previous post we have discussed about few of the features of Navbar. As we all know from the previous post that Navbar is one of the prominent features of Bootstrap sites. Navbars collapses on the mobile views and become horizontal as the width of the browser increases. Navbars are responsive meta components that serve as a navigation headers for your application.
Example : Adding Forms to Navbar
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
The above code will add a search texbox and a search button to your navbar as shown below. You can place it inside <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> which we have shown in our previous post.
In Large Screens :
In Mobile Screens:
Example : Adding a Dropdown to the Right of the Navbar
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">4th Tab With Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">1st Sub Tab</a></li>
<li><a href="#">2nd Sub Tab</a></li>
<li><a href="#">3rd Sub Tab</a></li>
<li><a href="#">4th Sub Tab</a></li>
</ul>
</li>
</ul>
The above code will add a dropdown to the right of the search button. You have to place this code inside <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> which we have shown in our previous post.
In Large Screens:
In Mobile Screens:
Please Like and Share the Blog, if you find it interesting and helpful.
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
The above code will add a search texbox and a search button to your navbar as shown below. You can place it inside <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> which we have shown in our previous post.
In Large Screens :
In Mobile Screens:
Example : Adding a Dropdown to the Right of the Navbar
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">4th Tab With Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">1st Sub Tab</a></li>
<li><a href="#">2nd Sub Tab</a></li>
<li><a href="#">3rd Sub Tab</a></li>
<li><a href="#">4th Sub Tab</a></li>
</ul>
</li>
</ul>
The above code will add a dropdown to the right of the search button. You have to place this code inside <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> which we have shown in our previous post.
In Large Screens:
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment