Divided Bootstrap Tab MenuMarch 17, 2017

I recently found myself in a situation where I needed to use Bootstrap tab functionality but the tab menu needed to be split into sections with markup between the sections. In the Bootstrap guides and all of the examples I found, people used a list (ordered or unordered) and list items to create the tab menu, something like:

<ul class="nav nav-tabs">

  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>

  <li><a href="#profile" data-toggle="tab">Profile</a></li>

</ul>

The problem is that only <li> elements can be children of a list, anything else is semantically incorrect, so there wasn't a way for me to split the nav between the <li> elements to achieve my goals. I was getting ready to whip up a custom JS solution when I decided to poke around the Bootstrap source code to see if there was another way, and to my delight there actually is!
In addition to using ordered or unordered lists with list items you can also use a <nav> element wrapped around children with a 'nav-item' class, which would look like:

<nav>

  <div class="nav-item active"><a href="#home" data-toggle="tab">Home</a></div>

  <div class="nav-item"><a href="#profile" data-toggle="tab">Profile</a></div>

</ul>

Now you can easily insert markup between the nav-items to your hearts content:

<nav class="row">

  <div class="col-md-6">

    <div class="nav-item active"><a href="#home" data-toggle="tab">Home</a></div>

  </div>

  <div class="col-md-6">

    <div class="nav-item"><a href="#profile" data-toggle="tab">Profile</a></div>

  </div>

</ul>