Nav Tabs

Nav Tabs #1
Ex.

<div class="row">
    <div class="col-lg-12">
        <ul class="nav nav-pills nav-justified flex-column flex-sm-row rounded" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link rounded active" id="pills-cloud-tab" data-bs-toggle="pill" href="#pills-cloud" role="tab" aria-controls="pills-cloud" aria-selected="false">
                    <div class="text-center py-2">
                        <h6 class="mb-0">Home</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
            
            <li class="nav-item">
                <a class="nav-link rounded" id="pills-smart-tab" data-bs-toggle="pill" href="#pills-smart" role="tab" aria-controls="pills-smart" aria-selected="false">
                    <div class="text-center py-2">
                        <h6 class="mb-0">About</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
            
            <li class="nav-item">
                <a class="nav-link rounded" id="pills-apps-tab" data-bs-toggle="pill" href="#pills-apps" role="tab" aria-controls="pills-apps" aria-selected="false">
                    <div class="text-center py-2">
                        <h6 class="mb-0">Service</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
        </ul><!--end nav pills-->
    </div><!--end col-->
</div><!--end row-->

<div class="row pt-3">
    <div class="col-12">
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-cloud" role="tabpanel" aria-labelledby="pills-cloud-tab">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>
            </div><!--end teb pane-->
            
            <div class="tab-pane fade" id="pills-smart" role="tabpanel" aria-labelledby="pills-smart-tab">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>                       
            </div><!--end teb pane-->

            <div class="tab-pane fade" id="pills-apps" role="tabpanel" aria-labelledby="pills-apps-tab">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>                       
            </div><!--end teb pane-->
        </div><!--end tab content-->
    </div><!--end col-->
</div><!--end row-->

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

Nav Tabs #2
Ex.

<div class="row">
    <div class="col-md-4 mt-4 pt-2">
        <ul class="nav nav-pills nav-justified flex-column rounded shadow p-3 mb-0 sticky-bar" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link rounded active" id="webdeveloping" data-bs-toggle="pill" href="#developing" role="tab" aria-controls="developing" aria-selected="false">
                    <div class="text-center py-1">
                        <h6 class="mb-0">Home</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
            
            <li class="nav-item mt-2">
                <a class="nav-link rounded" id="database" data-bs-toggle="pill" href="#data-analise" role="tab" aria-controls="data-analise" aria-selected="false">
                    <div class="text-center py-1">
                        <h6 class="mb-0">About</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
            
            <li class="nav-item mt-2">
                <a class="nav-link rounded" id="server" data-bs-toggle="pill" href="#security" role="tab" aria-controls="security" aria-selected="false">
                    <div class="text-center py-1">
                        <h6 class="mb-0">Service</h6>
                    </div>
                </a><!--end nav link-->
            </li><!--end nav item-->
        </ul><!--end nav pills-->
    </div><!--end col-->

    <div class="col-md-8 col-12 mt-4 pt-2">
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active p-4 rounded shadow" id="developing" role="tabpanel" aria-labelledby="webdeveloping">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>
            </div><!--end teb pane-->
            
            <div class="tab-pane fade p-4 rounded shadow" id="data-analise" role="tabpanel" aria-labelledby="database">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>
            </div><!--end teb pane-->

            <div class="tab-pane fade p-4 rounded shadow" id="security" role="tabpanel" aria-labelledby="server">
                <p class="text-muted mb-0">You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.</p>
            </div><!--end teb pane-->
        </div><!--end tab content-->
    </div><!--end col-->
</div><!--end row-->

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Solucionáticos templates into a single one, you can take a component from the Application theme and use it in the Website.

Login