Center the nav in Twitter Bootstrap

Question

I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions  I don t want to use offsets to push it over or margin-left as this would just screw it up in different browser widths  This is the typical bar that I am messing around with but the ul always winds up left aligned           lt div class  navbar navbar-fixed-top  gt         lt div class  navbar-inner  gt              lt div class  container  gt                   lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  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  a gt                   lt div class  nav-collapse  gt                        lt ul class  nav  gt                             lt li class  active  gt  lt a href     gt Menu lt  a gt  lt  li gt                             lt li gt  lt a href     gt On Tap lt  a gt  lt  li gt                             lt li gt  lt a href     gt Shows lt  a gt  lt  li gt                             lt li gt  lt a href     gt Surfwear lt  a gt  lt  li gt                             lt li gt  lt a href      gt Contact lt  a gt  lt  li gt                        lt  ul gt                   lt  div gt  lt  --  nav-collapse -- gt              lt  div gt  lt  -- container -- gt         lt  div gt  lt  -- navbar-inner -- gt    lt  div gt  lt  --  navbar navbar-fixed-top -- gt

User · Answer

You can make the  navbar fixed width  then set it s left and right margin to auto   Demo   navbar      width  80       margin  0 auto

User · Answer

Code used basic nav bootstrap   x000D   x000D   lt  --MENU CENTER enter code here  RESPONSIVE -- gt  x000D   x000D     lt div class  container-fluid  gt  x000D           lt div class  container logo  gt  lt h1 gt LOGO lt  h1 gt  lt  div gt  x000D         lt nav class  navbar navbar-default menu  gt  x000D           lt div class  container-fluid  gt  x000D             lt  -- Brand and toggle get grouped for better mobile display -- gt  x000D             lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   defaultNavbar2  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  x000D              lt  div gt  x000D             lt  -- Collect the nav links  forms  and other content for toggling -- gt  x000D             lt div class  collapse navbar-collapse  id  defaultNavbar2  gt  x000D               lt ul class  nav nav-justified   gt  x000D                 lt li gt  lt a href     gt Home lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  div gt  x000D             lt  --   navbar-collapse -- gt  x000D           lt  div gt  x000D           lt  --   container-fluid -- gt  x000D         lt  nav gt  x000D       lt  div gt  x000D     lt  -- END MENU-- gt  x000D   x000D   x000D

User · Answer

I prefer this     lt nav class  navbar  gt     lt div class  hidden-xs hidden-sm  style  position  absolute left  50  margin-left -56px width 112px  id  centered-div  gt       lt  -- this element is on the center of the nav  visible only on -md and -lg -- gt       lt a gt  lt  a gt     lt  div gt      lt div class  container-fluid  gt       lt  --    things with your navbar    -- gt         lt div class  visible-xs visible-sm  gt           lt  -- this element will be hidden on -md and -lg -- gt         lt  div gt       lt  --    things with your navbar    -- gt     lt  div gt   lt  nav gt    The element is perfectly centered  and will be hidden on some screen sizes  there was no place left on -xs and -sm for me for example   I get the idea from Twitter s actual navbar

User · Answer

navbar-right        margin-left auto      margin-right auto       max-width  40          float none  important      just copy this code and change max-width as you like

User · Answer

Possible duplicate of Modify twitter bootstrap navbar  I guess this is what you are looking for  copied     navbar  nav   navbar  nav  gt  li     float none    display inline-block     display inline     ie7 fix       zoom 1     hasLayout ie7 trigger      vertical-align  top      navbar-inner     text-align center      As stated in the linked answer  you should make a new class with these properties and add it to the nav div

User · Answer

http   www bootply com 3iSOTAyumP in this example the button for collapse was not clickable because the  navbar-brand was in front   http   www bootply com RfnEgu45qR there is an updated version where the collapse buttons is actually clickable

User · Answer

For Bootstrap v4 check this   https   v4-alpha getbootstrap com components pagination  alignment  only add class to ul pagination    lt nav  gt     lt ul class  pagination justify-content-center  gt       lt li class  page-item disabled  gt         lt a class  page-link  href     tabindex  -1  gt Previous lt  a gt       lt  li gt       lt li class  page-item  gt  lt a class  page-link  href     gt 1 lt  a gt  lt  li gt       lt li class  page-item  gt  lt a class  page-link  href     gt 2 lt  a gt  lt  li gt       lt li class  page-item  gt  lt a class  page-link  href     gt 3 lt  a gt  lt  li gt       lt li class  page-item  gt         lt a class  page-link  href     gt Next lt  a gt       lt  li gt     lt  ul gt   lt  nav gt

User · Answer

For anyone needing this for Bootstrap 3  it is now much easier   The new nav-justified class can be used to center all of the navbar links    http   www bootply com g3g125MLGr   lt div class  navbar  gt     lt ul class  nav nav-justified  id  myNav  gt       lt li gt  lt a href     gt Home 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 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  ul gt   lt  div gt    Or with a little CSS you can center just the brand logo  and keep the left right links separate    http   www bootply com 3iSOTAyumP

[css] Center the nav in Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to center

Examples related to navbar