Tabs pulled right with an H4 element on the left WITH a bottom border |
From here. This is how it should look like with the default markup using Bootstrap.
Tabs pulled right with an H4 element on the left WITHOUT a bottom border |
I will post the markup here. The HTML markup is pretty standard.
<div class="col-8 subheader"> <h4 class="pull-left">Postings</h4> <ul class="nav nav-tabs pull-right" id="myTab"> <li><a href="#interesting" data-toggle="tab">Interesting</a></li> <li><a href="#freshest" data-toggle="tab">Freshest</a></li> <li><a href="#popular" data-toggle="tab">Popular</a></li> </ul> </div>
The interesting part is getting the bottom border to work out. If all goes to plan it should stretch from the "Postings" element up to the first tab. My solution isn't that good if you're into strict semantic HTML5 but I'd rather get it working than worrying about writing proper semantic HTML5. At least it will validate.
<div class="col-8 subheader"> <div id="btm-border"></div> <h4 class="pull-left">Postings</h4> <ul class="nav nav-tabs pull-right" id="myTab"> <li><a href="#interesting" data-toggle="tab">Interesting</a></li> <li><a href="#freshest" data-toggle="tab">Freshest</a></li> <li><a href="#popular" data-toggle="tab">Popular</a></li> </ul> </div>
The other half is the CSS rule. I write CSS using Less. Why? BECAUSE REASONS!
.subheader{ position: relative; #btm-border{ border-bottom: 1px solid #ddd; position: absolute; width: 446px; top: 42px; } }