<body>
<div>
<!-- Tabs - Page -->
<div class="tabs-page">
<!-- Nav Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul><!-- ./ nav tabs -->
</div><!-- ./ tabs page -->
<div class="tabs-page">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 class="text-center">Secondary Tabs</h3>
<h5 class="text-muted text-center">Just in case you want them</h5>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- Tabs - Secondary -->
<div class="tabs-secondary">
<!-- Nav Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#child1" aria-controls="child1" role="tab" data-toggle="tab">Option 1</a></li>
<li role="presentation"><a href="#child2" aria-controls="child2" role="tab" data-toggle="tab">OPtion 2</a></li>
</ul><!-- ./ nav tabs -->
</div><!-- ./ tabs secondary -->
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</body>
// Font Import
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700)
// Color Variables
$background-light: #F3F4F8
$border-light: darken($background-light, 2%)
$default: #BDC4D0
$active: #0075AD
// Font Variable
$font-family: "Open Sans", Helvetica, Arial, sans-serif
// Set HTML Font Size for REM's useage
\:root
font-size: 16px
// Assign all elements new font
*
font-family: $font-family
body
height: 100vh
background: $background-light
.tabs-page
position: relative
//Bootstrap .nav-tabs direct descendant styles
> .nav-tabs
position: relative
min-height: 50px
margin: 0
padding-left: 15px
text-align: left
cursor: auto
border: none
z-index: 1
li[role="presentation"]
display: inline-block
height: 50px
border: none
&:not(:last-child)
padding-right: 22px
//Default styles
a[role="tab"]
height: 50px
margin: 0
padding: 0px
font:
size: 0.875rem
weight: 700
text:
transform: none
align: center
letter-spacing: 0.25px
color: $default
background: none
border: none
line-height: 50px
transition: color 0.3s ease, box-shadow 0.2s ease
//Hover state
&:hover
color: $active
//Active class assigned via Bootstrap click method
&.active
//Active styles
a
color: $active
box-shadow: inset 0 -2px 0 $active
background: none
&:hover, &:focus
background: none
border: none
//Bootstrap .tab-content direct descendant styles
> .tab-content
position: relative
min-height: 500px
margin: 0
padding: 0
background: white
border-top: 1px solid $border-light
border-bottom: 1px solid $border-light
.tabs-secondary
position: relative
text-align: center
//Bootstrap .nav-tabs direct descendant styles
> .nav-tabs
display: inline-block
margin: 0 auto 15px
border-bottom: 1px solid $border-light
li[role="presentation"]
&:not(:last-child)
margin-right: 20px
a[role="tab"]
padding: 12px 0
font:
size: 0.6875rem
weight: 700
text:
transform: uppercase
letter-spacing: 0.02rem
color: $default
border: none !important
background: none !important
&:hover
color: $active
li.active
a[role="tab"]
color: $active
background: none
box-shadow: inset 0 -2px 0 0 $active
View Compiled
