jquery - Center buttons and brand in Bootstrap -

jquery - Center buttons and brand in Bootstrap -

i starting out bootstrap , finding frustrating simple things.

the "brand" text in bootstrap navbar demo, along buttons, left aligned. want of centered. code below centers buttons, when center "brand" text overlaps buttons.

here's code:

<nav class="navbar navbar-inverse" role="navigation" style="margin: 0;"> <div class="container-fluid"> <!-- brand , toggle grouped improve 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" href="#">brand</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;"> <ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;"> <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> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

can help me out? also, struggling see why bootstrap (and other libs) popular. if want create generic bootstrap website it's easy, custom have hack css together. seems more hassle it's worth.

you can seek moving <a class="navbar-brand" href="#">brand</a> after </button> tag line after <ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">.

<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;"> <a class="navbar-brand" href="#">brand</a> <li class="active"><a href="#">link</a></li>

it worked me.

however, note alter prevent text 'brand' displaying in little screens default, outside <navbar-header> class. part of collapse grouping now.

additionally, if wondered solution appearing strange... well. find using a tag under ul weird too.

edit: <li class="navbar-brand"><a href="#">brand</a></li> works too.

jquery html css twitter-bootstrap