TAB

                
<div class="row">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 1</h2>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-1-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-1-8">Music</a></li>
    </ul>
    <div class="tab-content mt-4">
        <div class="tab-pane show active" id="tab-1-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-1-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-1-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-1-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-1-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-1-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-1-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-1-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div> 
            
            Copy to clipboard
            

                
<div class="row">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 2</h2>
    <ul class="nav nav-tabs nav-tab-line justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-2-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2-8">Music</a></li>
    </ul>
    <div class="tab-content mt-4">
        <div class="tab-pane show active" id="tab-2-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-2-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-2-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-2-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-2-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-2-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-2-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-2-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div>
            
            Copy to clipboard
            

                
<div class="row">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 3</h2>
    <ul class="nav nav-tabs nav-tab-bordered justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-3-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3-8">Music</a></li>
    </ul>
    <div class="tab-content mt-4">
        <div class="tab-pane show active" id="tab-3-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-3-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-3-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-3-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-3-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-3-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-3-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-3-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div>
            
            Copy to clipboard
            

                
<div class="row">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 4</h2>
    <ul class="nav nav-tabs nav-tab-shadow justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-4-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-4-8">Music</a></li>
    </ul>
    <div class="tab-content mt-4">
        <div class="tab-pane show active" id="tab-4-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-4-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-4-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-4-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-4-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-4-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-4-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-4-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div>
            
            Copy to clipboard
            

                
<div class="row">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 5</h2>
    <ul class="nav nav-tabs nav-tab-shadow tab-radius justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-5-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-5-8">Music</a></li>
    </ul>
    <div class="tab-content mt-4">
        <div class="tab-pane show active" id="tab-5-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-5-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-5-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-5-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-5-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-5-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-5-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-5-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div>
            
            Copy to clipboard
            

                
<h2 class="mb-4">Tab Style 6</h2>       
<div class="row mb-5">                    
    <div class="col-md-2">
        <ul class="nav nav-tabs flex-column nav-tab-shadow nav-tab-vertical text-center">
            <li class="nav-item mb-3"><a class="nav-link active" data-toggle="tab" href="#tab-6-1">Fashion</a></li>
            <li class="nav-item mb-3"><a class="nav-link" data-toggle="tab" href="#tab-6-2">Business</a></li>
            <li class="nav-item mb-3"><a class="nav-link" data-toggle="tab" href="#tab-6-3">Politics</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-6-4">Technology</a></li>
        </ul>
    </div>
    <div class="col-md-10">
        <div class="tab-content mt-4 mt-md-0">
            <div class="tab-pane show active" id="tab-6-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor.
            </div>
            <div class="tab-pane" id="tab-6-2">
                Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio.
            </div>
            <div class="tab-pane" id="tab-6-3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor.
            </div>
            <div class="tab-pane" id="tab-6-4">
                Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio.
            </div>
        </div>
    </div>
</div>
            
            Copy to clipboard
            

                
<div class="row mb-4 style-7">
<div class="col-md-12 mb-5">
    <h2 class="mb-4">Tab Style 7</h2>
    <ul class="nav nav-tabs nav-tab-bordered primary-top justify-content-center">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-7-1">All</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-2">Business</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-3">Politics</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-4">Technology</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-5">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-6">Life Style</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-7">Sport</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-7-8">Music</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane show active" id="tab-7-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-7-2">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-7-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-7-4">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-7-5">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-7-6">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
        <div class="tab-pane" id="tab-7-7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum suscipit nulla. Aliquam non erat eros. Nulla non congue magna. Etiam sit amet leo id dui commodo fermentum. Fusce eu augue id eros volutpat posuere. Maecenas vehicula, urna et lacinia consectetur, erat tortor ultrices orci, quis tempor leo massa sit amet sem. Proin eu mollis urna. Phasellus id dapibus ligula, sed tincidunt odio. Quisque interdum odio a lorem euismod tempor. Nunc egestas, arcu sit amet vehicula auctor, eros enim facilisis metus, vel dignissim risus sem quis est. Aliquam vitae est eu eros luctus dictum nec sit amet nisl.
        </div>
        <div class="tab-pane" id="tab-7-8">
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam diam lacus, vehicula eget auctor nec, tincidunt nec diam. Pellentesque et condimentum est. Phasellus porttitor, dolor vel rhoncus rutrum, ex enim luctus ex, sit amet venenatis tellus risus eget nisi. Maecenas mollis eros et auctor suscipit. Nunc vitae viverra erat, vel luctus urna. Vestibulum at bibendum ex. Cras sed consequat lacus. Maecenas ut dui vitae turpis imperdiet iaculis quis et risus. Nunc eu urna id turpis tempus scelerisque vel ullamcorper mauris. Aliquam vitae faucibus mi, ut placerat augue.
        </div>
    </div>
</div>
</div>
            
            Copy to clipboard