Align Bootstrap Navigation to Center

Question

I m having a problem with bootstrap 3 navigation  i have some content on the left  center and right  it seems there is no option for centering the navigation   http   jsfiddle net 29tQt embedded result   I m trying to get the links titled  center  to be in the center of the page  how can i achieve that     lt nav class  navbar navbar-default  role  navigation  gt       lt div class  container-fluid  gt           lt div class  navbar-header  gt               lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt   lt span class  sr-only  gt Toggle navigation lt  span gt    lt span class  icon-bar  gt  lt  span gt    lt span class  icon-bar  gt  lt  span gt    lt span class  icon-bar  gt  lt  span gt                lt  button gt   lt a class  navbar-brand  href     gt Brand lt  a gt            lt  div gt           lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt               lt ul class  nav navbar-nav  gt                   lt li class  active  gt  lt a href     gt Center lt  a gt                   lt  li gt                   lt li gt  lt a href     gt Center lt  a gt                   lt  li gt                   lt li gt  lt a href     gt Center lt  a gt                   lt  li gt               lt  ul gt               lt ul class  nav navbar-nav navbar-right  gt                   lt li gt  lt a href     gt Right lt  a gt                   lt  li gt                   lt li gt  lt a href     gt Right lt  a gt                   lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  nav gt

User · Accepted Answer

Thank you all for your help  I added this code and it seems it fixed the issue    navbar  navbar-nav       display  inline-block      float  none      navbar  navbar-collapse       text-align  center      Source  Center content in responsive bootstrap navbar

User · Answer

Try this css   clearfix before   clearfix after   container before   container after   container-fluid before   container-fluid after   row before   row after   form-horizontal  form-group before   form-horizontal  form-group after   btn-toolbar before   btn-toolbar after   btn-group-vertical  gt   btn-group before   btn-group-vertical  gt   btn-group after   nav before   nav after   navbar before   navbar after   navbar-header before   navbar-header after   navbar-collapse before   navbar-collapse after   pager before   pager after   panel-body before   panel-body after   modal-footer before   modal-footer after       content           display  table-cell     ul nav       float  none      margin-bottom  0      margin-left  auto      margin-right  auto      margin-top  0      width  240px

User · Answer

navbar-nav      float  left     margin  0     margin-left  40       navbar-nav navbar-right last-child      margin-right  -15px     margin-left  0      Updated Fiddle  Since You Have used the float property we don t have many options except to adjust it manually

User · Answer

Add  justified  class to  ul     lt ul class  nav navbar-nav justified  gt    CSS    justified       position absolute      left 50       Now  calculate its  margin-left  in order to align it to center      calculating margin-left to align it to center  var width       justified   width        justified   css  margin-left    -     width   2   px      JSFiddle Code  JSFiddle Embedded Link

[css] Align Bootstrap Navigation to Center

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3