Bootstrap Navbar

Bootstrap Navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">GUI</a></li> <li><a href="#">UI</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> UX <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">Images</a></li> <li><a href="#">Code</a></li> <li class="divider"></li> <li><a href="#">frontend</a></li> <li class="divider"></li> <li><a href="#">Backend</a></li> </ul> </li> </ul> </div> </nav>

Responsive navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Web Design</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">UI</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">UX</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Images <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">Alignments</a></li> <li><a href="#">Design</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> <li class="divider"></li> <li><a href="#">Backends</a></li> </ul> </li> </ul> </div> </nav>

Forms in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <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> </div> </nav>


Buttons in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <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</button> </form> <button type="button" class="btn btn-default navbar-btn"> Navbar Button </button> </div> </nav>

Text in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <p class="navbar-text"> Welcome Web</p> </div> </nav>

Non-nav links

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <p class="navbar-text navbar-right"> Signed in as <a href="#" class="navbar-link">Web</a> </p> </div> </div>