Component alignment

Component alignment

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web design</a> </div> <div> <!--Left Align--> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> UI <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">UX</a></li> <li><a href="#">Images</a></li> <li><a href="#">GUI</a></li> <li class="divider"></li> <li><a href="#">Images</a></li> <li class="divider"></li> <li><a href="#">Colors</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Left align-Submit Button </button> </form> <p class="navbar-text navbar-left"> Left align-Text</p> <!--Right Align--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Design <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Image</a></li> <li><a href="#">Design</a></li> <li><a href="#">Pattern</a></li> <li class="divider"></li> <li><a href="#">Looks</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Right align-Submit Button </button> </form> <p class="navbar-text navbar-right"> Right align-Text</p> </div> </nav>

Fixed to top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">UI</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="#">Cursor</a></li> <li><a href="#">Points</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Alignments</a></li> <li class="divider"></li> <li><a href="#">Objects</a></li> </ul> </li> </ul> </div> </nav>

Fixed to bottom

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Images</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Objects <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Points</a></li> <li><a href="#">Actions</a></li> <li><a href="#">Events</a></li> <li class="divider"></li> <li><a href="#">Animations</a></li> <li class="divider"></li> <li><a href="#">Effects</a></li> </ul> </li> </ul> </div> </nav>

Static top

<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Images</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Fonts <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Colors</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Alignments</a></li> <li class="divider"></li> <li><a href="#">Contents</a></li> <li class="divider"></li> <li><a href="#">Seo</a></li> </ul> </li> </ul> </div> </nav>

Inverted navbar

<nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Web Design</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Icons</a></li> <li><a href="#">Fonts</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Colors <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Alignments</a></li> <li><a href="#">Images</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Mark</a></li> <li class="divider"></li> <li><a href="#">All Contents</a></li> </ul> </li> </ul> </div> </nav>