How to fix bootstrap tab Vertical with text?

Total Post:194

Points:1396
 2440  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:

How to fix bootstrap tab Vertical with text?

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. 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!