Center content in responsive bootstrap navbar

Question

I m having trouble centering my content in the bootstrap navbar  I m using bootstrap 3  I ve read many posts  but the CSS or methods used will not work with my code  I m really frustrated  so this is like my last option  Any help would be appreciated    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Navigation lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt  -- Bootstrap -- gt       lt link href  css bootstrap min css  rel  stylesheet  media  screen  gt       lt link href  css style css  rel  stylesheet  media  screen  gt     lt  head gt     lt body gt       lt div class  container  gt         lt nav class  navbar navbar-default  role  navigation  gt           lt  -- Brand and toggle get grouped for better mobile display -- gt           lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-ex1-collapse  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  div gt            lt  -- Collect the nav links  forms  and other content for toggling -- gt           lt div class  collapse navbar-collapse navbar-ex1-collapse  gt             lt ul class  nav navbar-nav  gt               lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt li gt  lt a href     gt Link lt  a gt  lt  li gt             lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt li class  dropdown  gt                 lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                 lt ul class  dropdown-menu  gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt                 lt  ul gt               lt  li gt             lt  ul gt           lt  div gt  lt  --   navbar-collapse -- gt         lt  nav gt         lt h1 gt Home lt  h1 gt       lt  div gt        lt  --JAVASCRIPT-- gt      lt script src  js jquery-1 10 2 min js  gt  lt  script gt      lt script src  js bootstrap min js  gt  lt  script gt    lt  body gt   lt  html gt    https   jsfiddle net amk07fb3

User · Answer

The original post was asking how to center the collapsed navbar  To center elements on the normal navbar  try this    navbar-nav       float none      margin 0 auto      display  block      text-align  center      navbar-nav  gt  li       display  inline-block      float none

User · Answer

For Bootstrap 4   Just use   lt ul class  navbar-nav mx-auto  gt    mx-auto will do the job

User · Answer

Update 2020    Bootstrap 5 Beta The Navbar is still flexbox based in Bootstrap 5 and centering content works the same as it did with Bootstrap 4  Examples Bootstrap 4 Centering Navbar content is easier is Bootstrap 4  and you can see many centering scenarios explained here  https   stackoverflow com a 20362024 171456 Bootstrap 3 Another scenario that doesn t seem to have been answered yet is centering both the brand and navbar links  Here s a solution    navbar  navbar-header   navbar-collapse       float none      display inline-block      vertical-align  top      media  max-width  768px         navbar-collapse            display  block           http   codeply com go 1lrdvNH9GI Also see  Bootstrap NavBar with left  center or right aligned items

User · Answer

Seems like all these answers involve custom css on top of bootstrap  The answer I am providing utilizes only bootstrap so I hope it comes to use for those that want to limit customizations   This was tested with Bootstrap V3 3 7   lt footer class  navbar-default navbar-fixed-bottom  gt       lt div class  container-fluid  gt           lt div class  row  gt               lt div class  col-xs-offset-5 col-xs-2 text-center  gt                   lt p gt I am centered text lt p gt               lt  div gt               lt div class  col-xs-5  gt  lt  div gt           lt  div gt       lt  div gt   lt  footer gt

User · Answer

There s another way to do this for layouts that doesn t have to put the navbar inside the container  and which doesn t require any CSS or Bootstrap overrides   Simply place a div with the Bootstrap container class around the navbar   This will center the links inside the navbar    lt nav class  navbar navbar-default  gt     lt  -- here s where you put the container tag -- gt     lt div class  container  gt        lt div class  navbar-header  gt       lt  -- header and collapsed icon here -- gt       lt  div gt        lt div class  collapse navbar-collapse  gt         lt ul class  nav navbar-nav  gt         lt  -- links here -- gt         lt  ul gt       lt  div gt     lt  div gt   lt  -- close the container tag -- gt   lt  nav gt   lt  -- close the nav tag -- gt    If you want the then align body content to the center navbar  you also put that body content in the Bootstrap container tag    lt div class  container  gt     lt   -- body content here -- gt   lt  div gt    Not everyone can use this type of layout  some people need to nest the navbar itself inside the container    Nonetheless  if you can do it  it s an easy way to get your navbar links and body centered   You can see the results in this fullpage JSFiddle  http   jsfiddle net bdd9U 231 embedded result   Source  http   jsfiddle net bdd9U 229

User · Answer

it because it apply flex  you can use this code  media  min-width  992px    navbar-expand-lg  navbar-collapse       display  -ms-flexbox important      display  flex important      -ms-flex-preferred-size  auto      flex-basis  auto      justify-content  center     in my case it workded correctly

User · Answer

this should work     navbar-nav       position  absolute      left  50       transform  translatex -50

User · Answer

I think this is what you are looking for  You need to remove the float  left from the inner nav to center it and make it a inline-block    navbar  navbar-nav     display  inline-block    float  none    vertical-align  top      navbar  navbar-collapse     text-align  center      http   jsfiddle net bdd9U 2   Edit  if you only want this effect to happen when the nav isn t collapsed surround it in the appropriate media query    media  min-width  768px         navbar  navbar-nav           display  inline-block          float  none          vertical-align  top              navbar  navbar-collapse           text-align  center            http   jsfiddle net bdd9U 3

User · Answer

from the bootstrap official site  and  almost  like Eric S  Bullington said   https   getbootstrap com components  navbar-default  the example navbar looks like    lt nav class  navbar navbar-default  gt       lt div class  container-fluid  gt           lt  -- Brand and toggle get grouped for better mobile display -- gt           lt div class  navbar-header  gt             etc   to center the nav  that what i ve done    lt div class  container-fluid  id  nav center  gt    css    media  min-width 768px       don t break navbar on small screen         nav center           width  700px    need to found your width according to your entry             work with class  container  and navbar-right or left  and of course you can replace id by class   D

User · Answer

Use following html   lt link rel  stylesheet  href  app components directives navBar navBar scss   gt   lt nav class  navbar navbar-default  role  navigation  gt       lt div class  container-fluid  gt           lt  -- Collect the nav links  forms  and other content for toggling -- gt               lt ul class  nav navbar-nav  gt                   lt li gt  lt h5 gt  lt a href      gt Home lt  a gt  lt  h5 gt  lt  li gt                   lt li gt   lt  li gt                   lt li gt  lt h5 gt  lt a href   products  gt About lt  a gt  lt  h5 gt  lt  li gt                   lt li gt   lt  li gt                   lt li gt  lt h5 gt  lt a href     gt Contacts lt  a gt  lt  h5 gt  lt  li gt                   lt li gt   lt  li gt                   lt li gt  lt h5 gt  lt a href   cart  gt Cart lt  a gt  lt  h5 gt  lt  li gt               lt  ul gt       lt  div gt  lt  --   container-fluid -- gt   lt  nav gt    And css   navbar-nav     width  100     text-align  center     navbar-nav  gt  li     float  none    display  inline-block     navbar-default     background-color  white    border-color  white     navbar-default  navbar-nav gt  active gt a   navbar-default  navbar-nav gt  active gt a hover   navbar-default  navbar-nav gt  active gt a focus    background-color white      Modify according to your needs

User · Answer

V4 of BootStrap is adding Center  justify-content-center  and Right Alignment  justify-content-end  as per  https   v4-alpha getbootstrap com components navs  horizontal-alignment   lt ul class  nav justify-content-center  gt     lt li class  nav-item  gt       lt a class  nav-link active  href     gt Active lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt Link lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link disabled  href     gt Disabled lt  a gt     lt  li gt   lt  ul gt

User · Answer

This code worked for me    navbar  navbar-nav       display  inline-block      float  none     navbar  navbar-collapse       text-align  center

[css] Center content in responsive bootstrap navbar

Examples related to css

Examples related to twitter-bootstrap

Examples related to navbar