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 :
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