Bootstrap 3 - Vertical tabs stacked on the left, tabs body on the right

bs3_vertical_tabs

<!-- taken from http://www.bootply.com/74926 -->

<style type="text/css">

    .tabs-left > .nav-tabs {
      border-bottom: 0;
    }

    .tab-content > .tab-pane,
    .pill-content > .pill-pane {
      display: none;
    }

    .tab-content > .active,
    .pill-content > .active {
      display: block;
    }

    .tabs-left > .nav-tabs > li {
      float: none;
    }

    .tabs-left > .nav-tabs > li > a {
      min-width: 74px;
      margin-right: 0;
      margin-bottom: 3px;
    }

    .tabs-left > .nav-tabs {
      float: left;
      margin-right: 19px;
      border-right: 1px solid #ddd;
    }

    .tabs-left > .nav-tabs > li > a {
      margin-right: -1px;
      -webkit-border-radius: 4px 0 0 4px;
         -moz-border-radius: 4px 0 0 4px;
              border-radius: 4px 0 0 4px;
    }

    .tabs-left > .nav-tabs > li > a:hover,
    .tabs-left > .nav-tabs > li > a:focus {
      border-color: #eeeeee #dddddd #eeeeee #eeeeee;
    }

    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
      border-color: #ddd transparent #ddd #ddd;
      border-right-color: #ffffff;
    }
</style>

<div class="container-fluid">
    <div class="row">

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

            <h3>Vertical Tabs</h3>

            <!-- tab_panel -->
            <div class="tabs-left">

                <ul class="nav nav-tabs">

                    <li class="active">
                        <a href="#a" data-toggle="tab">One</a>
                    </li>

                    <li>
                        <a href="#b" data-toggle="tab">Two</a>
                    </li>

                    <li>
                        <a href="#c" data-toggle="tab">Twee</a>
                    </li>
                </ul>

                <div class="tab-content">

                    <div class="tab-pane active" id="a">
                        Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
                        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
                    </div>

                    <div class="tab-pane" id="b">
                        Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
                        Aliquam in felis sit amet augue.
                    </div>

                    <div class="tab-pane" id="c">
                        Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.
                    </div>

                </div><!-- /tab-content -->

            </div><!-- /tab_panel -->

        </div><!-- /col -->
    </div><!-- /row -->

</div>