How to set tabs according specific grids in bootstrap? - html

Question

I'll be glad if you can help me on a specific issue for which I haven't find
any solution for that.
I have to make a web page in bootstrap which includes horizontal tabs.
The issue is that I need that The first tab will start from the
2nd grid and beyond as seen below:
I tried with my code but nothing works as expected in the image above:
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color:#ececef;
}
#edit-app-tab {
background-color:#ececef;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabbable edit-app-tabs">
<ul class="nav nav-tabs nav-tabs-colors">
<div class="col-lg-offset-1"><li role="presentation"></li></div>
<li role="presentation">Tab1</li>
<li role="presentation" class="active">Tab2</li>
<li role="presentation">Tab3</li>
<li role="presentation">Tab4</li>
<li role="presentation">Tab5</li>
<li role="presentation">Tab6</li>
<li role="presentation">Tab7</li>
<li role="presentation">Tab8</li>
</ul>
<div class="tab-content">
<div id="edit-app-tab" class="tab-pane fade in active">
<div class="row">
<h3>Content Content Content</h3>
</div>
</div>
</div>
<div>
Can you please show me how to exact fit the tabs according to specific grid ?
Thanks in Advance for your help!
EVH671

Answer 1

You could for instance put your tabs into a divider with col-md-offset-1 class
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="tabbable edit-app-tabs">
<ul class="nav nav-tabs nav-tabs-colors col-md-offset-1">
<div class="">
<li role="presentation"></li>
</div>
<li role="presentation">Tab1
</li>
<li role="presentation" class="active">Tab2
</li>
<li role="presentation">Tab3
</li>
<li role="presentation">Tab4
</li>
<li role="presentation">Tab5
</li>
<li role="presentation">Tab6
</li>
<li role="presentation">Tab7
</li>
<li role="presentation">Tab8
</li>
</ul>
<div class="tab-content">
<div id="edit-app-tab" class="tab-pane fade in active">
<div class="row">
<h3>Content Content Content</h3>
</div>
</div>
</div>
<div>
More on grids: http://getbootstrap.com/css/#grid
Bare in mind that this offset's the div by 1 column in medum viewport and up.
and it'd be wise to have your whole layout structured properly with containers, rows and columns.