Using div inside of bootstrap nav-pill

Question

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.

The html I'm using is:

<ul class="nav nav-pills nav-justified" role="tablist">
   <div class="row">
      <div class="col-xs-6">
        <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
        <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
        <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
      </div>
      <div class="col-xs-6">
        <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
        <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
        <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
      </div>
   </div
</ul>

I had to remove the > 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.

.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;
}

My only issue now that I can think of is the maybe the <div class="row">...</div> and the <div class="col-xs-6">...</div> are getting in the way with the bootstrap.js file when the active toggle works.

But.. I'm no expert with JavaScript as you can probably tell so I need so help to figure out if this is possible.

Thanks

Rob

score 1 · Accepted Answer · answered Jan 14 '16 at 02:26

You can do this using only CSS and HTML. The issue you have is adding a row and col-xs-6 divs nested inside your nav li. An li element expects ul/ol tags as its immediate children - Bootstrap certainly does.

The way to solve your problem is to remove those extra divs inside the ul and then use display: inline-block on the li's, setting their width to 49%. It has to be less than 50% to keep two elements on the same line for some reason.

Here is the changed HTML code:

<ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
    <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
    <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
    <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
    <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
    <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
</ul>

And here is the key css:

.nav-justified li {
   width: 49%;
   display: inline-block;
}

score 0 · Answer 2 · answered Jan 14 '16 at 01:53

0

This should do it!

$(function(){
  $('li[role="presentation"]').on('click', function(e){
    $('ul[role="tablist"] li').removeClass('active');
    $(this).addClass('active');
  })
})

JSFiddle

answered Jan 14 '16 at 01:53

GAntoine

1,265
2
16
28

Nvm, found a bug, one sec. – GAntoine Jan 14 '16 at 01:54
It's working the active state is changing. But its not changing tab its just staying on the default active pills tab. I've also added an id before the li and the ul to make sure it was controlling the right nav-pills – rob12345 Jan 14 '16 at 02:06

Using div inside of bootstrap nav-pill

2 Answers2