Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to justify navbar-nav in Bootstrap 3

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>li {   float: none; }  // Navbar <nav class="navbar navbar-default">   <ul class="nav nav-justified navbar-nav">     <li><a href="/">Home</a></li>     <li><a href="group.html">Group</a></li>     <li><a href="services.html">Services</a></li>     <li><a href="positions.html">Positions</a></li>   </ul> </nav> 

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.

like image 332
josh Avatar asked Sep 29 '13 02:09

josh


People also ask

How do you justify a navbar item?

The navbar items can be aligned using flex utility. Use . justify-content-end class on collapse menu to justify items to the right.

How do I align navbar items right?

ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.


2 Answers

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/

like image 79
David Taiaroa Avatar answered Sep 26 '22 04:09

David Taiaroa


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>li {         display: table-cell;         float: none;         text-align: center;     } }  
like image 31
Nico Avatar answered Sep 22 '22 04:09

Nico