Navbar

navbar with Button

TO create form in navbar we use the .navbar-btn class

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Webpathshala</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
login page <span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li><a href="#">c login</a></li>
<li><a href="#">e login</a></li>
lt;ul gt;
lt;li gt;
<form class = "navbar-form navbar-left" 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>>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div> </nav>

output

Text with navbar

TO create form in navbar we use the .navbar-text class

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Webpathshala</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
login page <span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li><a href="#">c login</a></li>
<li><a href="#">e login</a></li>
lt;ul gt;
lt;li gt;
<form class = "navbar-form navbar-left" 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>>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
<p class = "navbar-text">Navbar text</p>
</div> </nav>

output

link with navbar

TO create form in navbar we use the .navbar-link class

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Webpathshala</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
login page <span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li><a href="#">c login</a></li>
<li><a href="#">e login</a></li>
lt;ul gt;
lt;li gt;
<form class = "navbar-form navbar-left" 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>>
<a href = "#" class = "navbar-link">navbar link</a>
</div> </nav>

output