<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row" style="height:480px;"> <div class="col-sm-6"> <div class="col-xs-9"> <div class="tab-content"> <div class="tab-pane active" id="huudas-1">Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.Хуудас 1.</div><div class="clearfix"></div> <div class="tab-pane" id="huudas-2">Хуудас 2.</div><div class="clearfix"></div> <div class="tab-pane" id="huudas-3">Хуудас 3.</div><div class="clearfix"></div> <div class="tab-pane" id="huudas-4">Хуудас 4.</div><div class="clearfix"></div> <div class="tab-pane" id="huudas-5">Хуудас 5.</div><div class="clearfix"></div> </div> </div> <div class="col-xs-3"> <ul class="nav nav-tabs tabs-right"> <li class="active"><a href="#huudas-1" data-toggle="tab">CAR</a></li> <li><a href="#huudas-2" data-toggle="tab">POWER</a></li> <li><a href="#huudas-3" data-toggle="tab">TEMP</a></li> <li><a href="#huudas-4" data-toggle="tab">STATS</a></li> <li><a href="#huudas-5" data-toggle="tab">INFO</a></li> </ul> </div> </div> </div> <div class="clearfix"></div>

.row { background: #363435; color: #21f1f3; } .tabs-left, .tabs-right { border-bottom: none; padding-top: 2px; background: #363435; } .tabs-left { border-right: 1px solid #34e8ea; background: #363435; } .tabs-right { border-left: 1px solid #34e8ea; background: #363435; } .tabs-left>li, .tabs-right>li { float: none; margin-bottom: 2px; } .tabs-left>li { margin-right: -1px; } .tabs-right>li { margin-left: -1px; } .tabs-left>li.active>a, .tabs-left>li.active>a:hover, .tabs-left>li.active>a:focus { border-bottom-color: #34e8ea; border-right-color: transparent; } .tabs-right>li.active>a, .tabs-right>li.active>a:hover, .tabs-right>li.active>a:focus { border-bottom: 3px solid #34e8ea; border-left-color: transparent; } .tabs-left>li>a { border-radius: 4px 0 0 4px; margin-right: 0; display:block; } .tabs-right>li>a { border-radius: 0 5px 5px 0; margin-right: 0; } .vertical-text { margin-top:50px; border: none; position: relative; } .vertical-text>li { height: 0px; width: 50px; margin-bottom: 0px; } .vertical-text>li>a { border-bottom: 2px solid #34e8ea; border-right-color: transparent; text-align: center; border-radius: 4px 4px 0px 0px; } .vertical-text>li.active>a, .vertical-text>li.active>a:hover, .vertical-text>li.active>a:focus { border-bottom-color: transparent; border-right-color: #34e8ea; border-left-color: #34e8ea; } .vertical-text.tabs-left { left: 0px; } .vertical-text.tabs-right { right: 0px; } .vertical-text.tabs-right>li { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .vertical-text.tabs-left>li { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }