HOW TO FIX BOOTSTRAP TAB VERTICAL WITH TEXT?

Kamlakar Singh

Total Post:194

Points:1396
Posted by  Kamlakar Singh
 2273  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:36

    Points:260
    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.

      Modified On Apr-09-2018 01:24:06 AM

Answer

NEWSLETTER

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