Justifying navbar elements for Bootstrap

Question

I'm trying to construct a navbar with the elements justified across the width of the page.

First, how to do that?

Second, here's code for the navbar: Is this correct? If not, can someone explain the correct way to construct one?

Thanks,

Joe

<div class="containr">
 <div id="navbar-main" class="navbar navbar-default">

   <div class="container">
    <ul class="nav navbar-nav">
     <li class="dropdown" id="foomenu"><a class="dropdown-toggle" 
       data-toggle="dropdown" href="#">Foo<b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">X</a></li>
      <li><a href="#">Y</a></li>
      <li><a href="#">Z</a></li>
     </ul>
    </li>
    <li class="dropdown nav-menu-items" id="barmenu">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bar<b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li><a href="#">A</a></li>
       <li><a href="#">B</a></li>
       <li><a href="#">C</a></li>
      </ul> 
     </li>

    <li id=smenu class=nav-menu-items><a href="#">S</a></li>
     <li id=contactmenu class=nav-menu-items><%= link_to "C", c_path %></li>

     <li class="dropdown nav-menu-items" id="Co">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Co<b class="caret"></b></a>
         <ul class="dropdown-menu">
          <li><%= link_to "P", p_path %></li>
          <li><%= link_to "Car", car_path %></li>
          <li><a href="#">Man</a></li>
          <li><%= link_to "News", news_path %></li>
          <li><%= link_to "Cont", cont_path %></li>
         </ul> 
        </li>

       </ul>
      </div>
     </div>
    </div>

possible duplicate of [How to justify navbar-nav in Bootstrap 3](http://stackoverflow.com/questions/19073813/how-to-justify-navbar-nav-in-bootstrap-3) — GreyCat, Apr 27 '15 at 01:02
-1 because: (a) your question seems to be exact duplicate of http://stackoverflow.com/questions/19073813/how-to-justify-navbar-nav-in-bootstrap-3, (b) your question shows zero research effort - you should describe what you've already tried and what is the current roadblock; otherwise, the only possible answer would be reciting documentation and that's not what StackOverflow is for, (c) "Here's the code, is it correct" questions make zero sense, unless you define "correct", i.e. what behavior would you want to achieve. — GreyCat, Apr 27 '15 at 01:06

score 0 · Accepted Answer · answered Apr 27 '15 at 09:21

<div class="container">
  <nav>
    <ul class="nav nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

see info in the docs http://getbootstrap.com/components/#nav-justified with an example http://getbootstrap.com/examples/justified-nav/

Justifying navbar elements for Bootstrap

1 Answers1