How to justify navbar-nav in Bootstrap 3

Question

I m attempting to justify a navbar  make the navbar contents stretch  in Bootstrap 3  I ve added margin  0 auto  max-width  1000px  to the nav  classes  and also attempted to add a container element as a parent to the ul  As a last check  I did what was suggested in this answer by adding navbar-justified to the navbar class  but this caused everything to scrunch together on the left without justifying the entire navbar    Doing a nav nav-justified ul does make the ul center  but it doesn t retain the styles of the navbar-nav class since it s not part of the ul  and it doesn t look great when the screen is smaller than 768px    How do I justify a Bootstrap 3 navbar   Edit  For those who are interested in a more complete answer  here is some code I use in production      Stylesheet  navbar-nav gt li     float  none        Navbar  lt nav class  navbar navbar-default  gt     lt ul class  nav nav-justified navbar-nav  gt       lt li gt  lt a href     gt Home lt  a gt  lt  li gt       lt li gt  lt a href  group html  gt Group lt  a gt  lt  li gt       lt li gt  lt a href  services html  gt Services lt  a gt  lt  li gt       lt li gt  lt a href  positions html  gt Positions lt  a gt  lt  li gt     lt  ul gt   lt  nav gt    And here is a working jsFiddle  You may have to stretch the size of the result box for it to show correctly  If you re interested in centering the actual list without the nav stretching to full width  see David Taiaroa s jsFiddle

User · Answer

Hi you can use this below code for working justified nav   lt div class  navbar navbar-inverse  gt       lt ul class  navbar-nav nav nav-justified  gt           lt li class  active  gt  lt a href     gt Inicio lt  a gt  lt  li gt           lt li gt  lt a href     gt Item 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Item 2 lt  a gt  lt  li gt           lt li gt  lt a href     gt Item 3 lt  a gt  lt  li gt           lt li gt  lt a href     gt Item 4 lt  a gt  lt  li gt       lt  ul gt    lt  div gt

User · Answer

Here is a more easy solution  just remove the  navbar-nav  class and add  nav-justified

User · Answer

lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt    lt div class  container  gt   lt div class  navbar-header  gt     lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-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 div class  collapse navbar-collapse  gt     lt ul class  nav navbar-nav  gt       lt li gt  lt a href     gt Home lt  a gt  lt  li gt       lt li gt  lt a href   about  gt About lt  a gt  lt  li gt       lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt       lt  ul gt   lt  div gt       and for the css   media   min-width  768px           navbar  gt   container           text-align  center             navbar-header  navbar-brand  navbar  navbar-nav  navbar  navbar-nav  gt  li           float  none          display  inline-block             collapse navbar-collapse           width  auto          clear  none            see it live http   www bootply com 103172

User · Answer

It turns out that there is a float  left property by default on all navbar-nav gt li elements  which is why they were all scrunching up to the left  Once I added the code below  it made the navbar both centered and not scrunched up    navbar-nav gt li           float  none      Hope this helps someone else who s looking to center a navbar

User · Answer

You can justify the navbar contents by using      media  min-width  768px      navbar-nav       margin  0 auto       display  table       table-layout  fixed       float  none            See this live  http   jsfiddle net panchroma 2fntE     Good luck

User · Answer

I know this is an old post but I would like share my solution  I spent several hours trying to make a justified navigation menu  You do not really need to modify anything in bootstrap css  Just need to add the correct class in the html       lt nav class  nav navbar-default navbar-fixed-top  gt           lt div class  navbar-header  gt               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   collapsable-1  aria-expanded  false  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   top  gt Brand Name lt  a gt           lt  div gt           lt div class  collapse navbar-collapse  id  collapsable-1  gt               lt ul class  nav nav-justified  gt                   lt li gt  lt a href   about-me  gt About Me lt  a gt  lt  li gt                   lt li gt  lt a href   skills  gt Skills lt  a gt  lt  li gt                   lt li gt  lt a href   projects  gt Projects lt  a gt  lt  li gt                   lt li gt  lt a href   contact-me  gt Contact Me lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  nav gt    This CSS code will simply remove the navbar-brand class when the screen reaches 768px   media  min-width  768px       navbar-brand          display  none

User · Answer

To justify the bootstrap 3 navbar-nav justify menu to 100  width you can use this code    media  min-width  768px        navbar-nav           margin  0 auto          display  table          table-layout  auto          float  none          width  100              navbar-nav gt li           display  table-cell          float  none          text-align  center

[twitter-bootstrap] How to justify navbar-nav in Bootstrap 3

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to navbar