<!-- Tabs -->
<ul class="ms-tabs nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#apple">Apple</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#apricot">Apricot</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#avocado">Avocado</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="apple">Apple</div>
<div class="tab-pane container-fluid active" id="apricot">Apricot</div>
<div class="tab-pane container-fluid fade" id="avocado">Avocado</div>
</div><!-- Tabs -->
<ul class="ms-tabs icon-top nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#movies">
<i class="material-icons">movie_creation</i> Movies
</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#music">
<i class="material-icons">music_note</i> Music
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pictures">
<i class="material-icons">panorama</i> Pictures
</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="movies">Movies</div>
<div class="tab-pane container-fluid active" id="music">Music</div>
<div class="tab-pane container-fluid fade" id="pictures">Pictures</div>
</div><!-- Tabs -->
<ul class="ms-tabs icon-right nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#movies2">
<i class="material-icons">movie_creation</i> Movies
</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#music2">
<i class="material-icons">music_note</i> Music
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pictures2">
<i class="material-icons">panorama</i> Pictures
</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="movies2">Movies</div>
<div class="tab-pane container-fluid active" id="music2">Music</div>
<div class="tab-pane container-fluid fade" id="pictures2">Pictures</div>
</div><!-- Tabs -->
<ul class="ms-tabs icon-bottom nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#movies3">
<i class="material-icons">movie_creation</i> Movies
</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#music3">
<i class="material-icons">music_note</i> Music
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pictures3">
<i class="material-icons">panorama</i> Pictures
</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="movies3">Movies</div>
<div class="tab-pane container-fluid active" id="music3">Music</div>
<div class="tab-pane container-fluid fade" id="pictures3">Pictures</div>
</div><!-- Tabs -->
<ul class="ms-tabs icon-left nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#movies4">
<i class="material-icons">movie_creation</i> Movies
</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#music4">
<i class="material-icons">music_note</i> Music
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pictures4">
<i class="material-icons">panorama</i> Pictures
</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="movies4">Movies</div>
<div class="tab-pane container-fluid active" id="music4">Music</div>
<div class="tab-pane container-fluid fade" id="pictures4">Pictures</div>
</div><!-- Tabs with Primary and Accent Colors -->
<ul class="ms-tabs nav nav-tabs nav-justified accent-pink primary-blue">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#apple1">Apple</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#apricot1">Apricot</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#avocado1">Avocado</a>
</li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div class="tab-pane container-fluid fade" id="apple1">Apple</div>
<div class="tab-pane container-fluid active" id="apricot1">Apricot</div>
<div class="tab-pane container-fluid fade" id="avocado1">Avocado</div>
</div><!-- Scrollable Tabs -->
<ul class="ms-tabs nav nav-tabs nav-justified primary-blue accent-pink">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#apple2">Apple</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#apricot2">Apricot</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#avocado2">Avocado</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#banana2">Banana</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#blackberry2">Blackberry</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#blackcurrant2">Blackcurrant</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#blueberry2">Blueberry</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#boysenberry2">Boysenberry</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#cherry2">Cherry</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#coconut2">Coconut</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#grape2">Grape</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kiwi2">Kiwi</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#lychee2">Lychee</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mango2">Mango</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#melon2">Melon</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#orange2">Orange</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#peach2">Peach</a>
</li>
</ul>