How to put navbar brand to right side in twitter bootstrap?

Question

I need a complete right-aligned navbar in bootstrap but the problem is my brand is in the left side but I need it to go to right side. Although I can put other list items using navbar-right option to the right side.

  <nav class="navbar navbar-default" role="navigation">       <!-- Brand and toggle get grouped for better mobile display -->       <div class="navbar-header">           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">               <span class="sr-only">Toggle navigation</span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>           </button>           <a class="navbar-brand pull-right" href="#">CesaStack</a>       </div>        <!-- Collect the nav links, forms, and other content for toggling -->       <div class="collapse navbar-collapse">           <ul class="nav navbar-nav navbar-right">               <li class="active"><a href="#">Link</a></li>               <li><a href="#">Link</a></li>               <li class="dropdown">                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>                   <ul class="dropdown-menu">                       <li><a href="#">Action</a></li>                       <li><a href="#">Another action</a></li>                       <li><a href="#">Something else here</a></li>                       <li class="divider"></li>                       <li><a href="#">Separated link</a></li>                       <li class="divider"></li>                       <li><a href="#">One more separated link</a></li>                   </ul>               </li>           </ul>           <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">بیاب</button>           </form>           <ul class="nav navbar-nav navbar-right">               <li><a href="#">Link</a></li>               <li class="dropdown">                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>                   <ul class="dropdown-menu">                       <li><a href="#">Action</a></li>                       <li><a href="#">Another action</a></li>                       <li><a href="#">Something else here</a></li>                       <li class="divider"></li>                       <li><a href="#">Separated link</a></li>                   </ul>               </li>           </ul>       </div><!-- /.navbar-collapse -->   </nav> 

Answer 1

Move the brand above the navbar-header and give it the class navbar-right.

This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.

http://jsfiddle.net/KHtU4/

<nav class="navbar navbar-default" role="navigation">   <a class="navbar-brand navbar-right" href="#">CesaStack</a>   <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">           <span class="sr-only">Toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>       </button>             </div>    <div class="collapse navbar-collapse">       <!-- snip -->   </div> </nav> 

Answer 2

The brand is on the left side, even though it has the class .pull-right, because it is contained in

<div class="navbar-header">    ..    <a class="navbar-brand pull-right" href="#">CesaStack</a> </div> 

if you place it outside, just after .navbar-header-></div>, then it will be aligned to the right as it should.

See your code in this fiddle -> http://jsfiddle.net/9BfjX/