HOW TO FIX BOOTSTRAP TAB VERTICAL WITH TEXT?

Kamlakar Singh

Total Post:194

Points:1396
Posted by  Kamlakar Singh
 1984  View(s)
Ratings:
Rate this:

Hello I’m using bootstrap vertical tabs

Here is my code:

<div class="row">

    <div class="col-md-3">

        <ul class="nav nav-tabs tabs-left">

            <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>

            <li><a href="#profile-v" data-toggle="tab">Profile</a></li>

        </ul>

    </div>

    <div class="col-md-9">

        <div class="tab-content">

            <div class="tab-pane active" id="home-v">Home Tab.</div>

            <div class="tab-pane" id="profile-v">Profile Tab.</div>

        </div>

    </div>

</div>

Screenshot:

My question is that, I’m want to set the orientation vertically of this tab with text. How is it possible?

Thank you in advance.

  1. Pawan Shukla

    Post:38

    Points:274
    Re: How to fix bootstrap tab Vertical with text?

    Hi kamlakar!

    I am trying to solve your problem

    This is possible and very simple you can use only a class sideways

    Here is my code:

    <div class="row">

        <div class="col-md-3">

            <ul class="nav nav-tabs tabs-left sideways">

                <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>

                <li><a href="#profile-v" data-toggle="tab">Profile</a></li>

            </ul>

        </div>

        <div class="col-md-9">

            <div class="tab-content">

                <div class="tab-pane active" id="home-v">Home Tab.</div>

                <div class="tab-pane" id="profile-v">Profile Tab.</div>

            </div>

        </div>

    </div>

    Screenshot:

    I hope this is help to you.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!