<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="template">
    <div class="row">	
        <h3>Right Side Tabs - (Vertical Text)</h3>
        <hr/>
        <div class="col-xs-8">
            <div class="tab-content">
                <div class="tab-pane active" id="jQuery">
                	<h4>jQuery</h4>
                	<div class="my_text">jQuery is a set of (a rich bundle of) JavaScript libraries that helps users apply dynamic functionality to web pages with great ease. It is designed to simplify the client-side scripting of HTML.  jQuery provides several powerful features, including the ability to access a part of a webpage,  HTML document traversal and manipulation, modify the content on fly, add animation, event handling,  apply AJAX, and more.</div>
                      <div class="my_text">jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and supports different types of browsers. It takes a lot of common tasks that requires many lines of JavaScript code to accomplish. It is also very useful to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.</div>
                </div>
                
                <div class="tab-pane" id="Bootstrap">
                	<h4>Bootstrap</h4>
                	<div class="my_text">Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</div>
					  <div class="my_text">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</div>
					  <div class="my_text">Our website proper alignment and padding, rows must be wrapped within a .container or .container-fluid respectively for fixed-width and full-width. Use rows to create horizontal groups of columns.</div>
                </div>
                
                <div class="tab-pane" id="AngularJS">
                	<h4>AngularJS</h4>
                	<div class="my_text">Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects. </div>
					  <div class="my_text">The basic version 1.0 was released in 2012 and  introduced by Miško Hevery, He is  started to work with AngularJS in 2009.</div>
					  <div class="my_text">The Angular is a Command Line Interface (CLI ) tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.</div>
                </div> 
            </div>
        </div>
        <div class="col-xs-4">
            <ul class="nav nav-tabs tabs-right vertical-text">
                <li class="active"><a href="#jQuery" data-toggle="tab">jQuery</a></li>
                <li><a href="#Bootstrap" data-toggle="tab">Bootstrap</a></li>
                <li><a href="#AngularJS" data-toggle="tab">AngularJS</a></li>
            </ul>
        </div>    
    </div>
</div>
.template{
  width:600px;
  margin:30px auto 20px;
  position:relative;
}
.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.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: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  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 4px 4px 0;
  margin-right: 0;
}
.vertical-text {
  margin-top:50px;
  border: none;
  position: relative;
}
.vertical-text>li {
  height: 20px;
  width: 120px;
  margin-bottom: 100px;
}
.vertical-text>li>a {
  border-bottom: 1px solid #ddd;
  border-right-color: transparent;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
}
.my_text{margin-top:0;color:#333; text-align:justify; font-size:14px; line-height:24px; margin:10px auto;}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
}
.vertical-text.tabs-left {
  left: -50px;
}
.vertical-text.tabs-right {
  right: -50px;
}
.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);
}