Bootstrap tabs

Create navigation tabs with the following examples.

Basic examples Premium component

Use <tabset> tag with assigned code inside to create the selected example.

Place your <tab>s inside the <tabset>.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


<!-- Tabset tabs -->
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'">
    <!--Panel 1-->
    <tab ripple-radius heading="Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-3 indigo'" [contentStyle]="'card'">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user'></i> Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart'></i> Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope'></i> Mail">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'nav-tabs md-pills pills-ins'" [contentStyle]=""> 
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user'></i> Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart'></i> Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope'></i> Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [vertical]="true" [buttonStyle]="'nav-tabs md-pills pills-primary flex-column'" [contentStyle]="'vertical'"> 
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user'></i> Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart'></i> Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope'></i> Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'nav-tabs md-pills pills-default'" [contentStyle]=""> 
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset #staticTabs1 [vertical]="true" [buttonStyle]="'nav-tabs md-pills pills-secondary flex-column'" [contentStyle]="'vertical'"> 
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>

Clasic tabs Premium component

For users who missed for classic Material Design tabs, we created fresh new version of tabs


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-cyan'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-orange'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-grey'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-pink'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-green'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>


<!-- Tabset tabs -->
<tabset [buttonStyle]="'classic-tabs tabs-primary'" [contentStyle]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <tab ripple-radius heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <tab ripple-radius heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>

Sizing

Add one of the following notations to the [buttonStyle], to divide your tabs into an equal, responsive columns.

`.tabs-3`

`.tabs-4`

`.tabs-5`


<p>.tabs-2</p>            
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-2 red'" [contentStyle]="'card'" (showBsTab)="show($event)" (shownBsTab)="shown($event)" (hideBsTab)="hide($event)" (hiddenBsTab)="hidden($event)">
    <!--Panel 1-->
    <tab ripple-radius heading="Panel 1"></tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Panel 2"></tab>
</tabset>

<p>.tabs-3</p>            
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'" (showBsTab)="show($event)" (shownBsTab)="shown($event)" (hideBsTab)="hide($event)" (hiddenBsTab)="hidden($event)">
    <!--Panel 1-->
    <tab ripple-radius heading="Panel 1"></tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Panel 2"></tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Panel 3"></tab>
</tabset>

<p>.tabs-4</p>            
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-4 red'" [contentStyle]="'card'" (showBsTab)="show($event)" (shownBsTab)="shown($event)" (hideBsTab)="hide($event)" (hiddenBsTab)="hidden($event)">
    <!--Panel 1-->
    <tab ripple-radius heading="Panel 1"></tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Panel 2"></tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Panel 3"></tab>
    <!--Panel 4-->
    <tab ripple-radius heading="Panel 4"></tab>
</tabset>

<p>.tabs-5</p>            
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-5 red'" [contentStyle]="'card'" (showBsTab)="show($event)" (shownBsTab)="shown($event)" (hideBsTab)="hide($event)" (hiddenBsTab)="hidden($event)">
    <!--Panel 1-->
    <tab ripple-radius heading="Panel 1"></tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Panel 2"></tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Panel 3"></tab>
    <!--Panel 4-->
    <tab ripple-radius heading="Panel 4"></tab>
    <!--Panel 5-->
    <tab ripple-radius heading="Panel 5"></tab>
</tabset>

Events

Event Type	Description
(showBsTab)="show($event)"	This event fires on tab show, but before the new tab has been shown.
(shownBsTab)="shown($event)"	This event fires on tab show after a tab has been shown.
(hideBsTab)="hide($event)"	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).
(hiddenBsTab)="hidden($event)"	This event fires after a new tab is shown (and thus the previous active tab is hidden).


<!-- Tabset tabs -->
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'" (showBsTab)="show($event)" (shownBsTab)="shown($event)" (hideBsTab)="hide($event)" (hiddenBsTab)="hidden($event)">
    <!--Panel 1-->
    <tab ripple-radius heading="Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
</tabset>

Data structure:


export class AppComponent  { 

    shown(event) {    }

    show(event) {    }

    hide(event) {    }

    hidden(event) {    }

}