To override and extend Bootstrap Nav Tabs.
<ul class="nav nav-tabs" id="tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab-1" data-toggle="tab" href="#content-1" role="tab" aria-controls="content-1" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" href="#content-2" role="tab" aria-controls="content-2" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-3" data-toggle="tab" href="#content-3" role="tab" aria-controls="content-3" aria-selected="false">Tab 3</a>
</li>
</ul>
<div class="tab-content" id="tabs-content">
<div class="tab-pane active" id="content-1" role="tabpanel" aria-labelledby="tab-1">
<p>Tab Content 1</p>
<p>
<label>Focuable Element</label>
<input type="text" />
</p>
</div>
<div class="tab-pane" id="content-2" role="tabpanel" aria-labelledby="tab-2">
<p>Tab Content 2</p>
</div>
<div class="tab-pane" id="content-3" role="tabpanel" aria-labelledby="tab-3">
<p>Tab Content 3</p>
</div>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadBootstrap": true
}