title: Using div inside of bootstrap nav-pill
body: <p>I'm trying to make the bootstrap nav-pills take up less space in mobile view, by default they stack on top of each other. This uses quick a lot of space. What I'm trying to achieve is getting two pills per line.
  So far I have got everything working with exception to the active class. When I click a pill it becomes active but doesn't take the active class away from the previous active pill.</p>
  
  <p>The html I'm using is:</p>
  
  <pre><code>&lt;ul class="nav nav-pills nav-justified" role="tablist"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
          &lt;li role="presentation" class="active"&gt;&lt;a href="#club" aria-controls="home" role="tab" data-toggle="tab"&gt;The Club&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#mens" aria-controls="profile" role="tab" data-toggle="tab"&gt;Men's Captains&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#womens" aria-controls="messages" role="tab" data-toggle="tab"&gt;Ladies' Captains&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-6"&gt;
          &lt;li role="presentation"&gt;&lt;a href="#stash" aria-controls="settings" role="tab" data-toggle="tab"&gt;Stash Captain's&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab"&gt;Social Sec's&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab"&gt;Hockey Experience&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
     &lt;/div
  &lt;/ul&gt;
  </code></pre>
  
  <p>I had to remove the <code>&gt;</code> from the CSS relating to the pills to ensure the styling worked. Because of the li no being directly after the ul. So thats all good.</p>
  
  <pre><code>.nav li a {
   position: relative;
   display: block;
   padding: 10px 15px;
  }
  .nav li a:hover,
  .nav li a:focus {
   text-decoration: none;
   background-color: #eee;
  }
  .nav li.disabled a {
   color: #777;
  }
  .nav-pills li {
   float: left;
  }
  .nav-pills li a {
   border-radius: 4px;
  }
  .nav-pills li + li {
   margin-left: 2px;
  }
  .nav-pills li.active a,
  .nav-pills li.active a:hover,
  .nav-pills li.active a:focus {
   color: #fff;
   background-color: #337ab7;
  }
  .nav-justified {
   width: 100%;
  }
  .nav-justified li {
   float: none;
  }
  .nav-justified li a {
   margin-bottom: 5px;
   text-align: center;
  }
  .nav-justified .dropdown .dropdown-menu {
   top: auto;
   left: auto;
  }
  </code></pre>
  
  <p>My only issue now that I can think of is the maybe the <code>&lt;div class="row"&gt;...&lt;/div&gt;</code> and the <code>&lt;div class="col-xs-6"&gt;...&lt;/div&gt;</code> are getting in the way with the bootstrap.js file when the active toggle works.</p>
  
  <p>But.. I'm no expert with JavaScript as you can probably tell so I need so help to figure out if this is possible.</p>
  
  <p>Thanks</p>
  
  <p>Rob </p>