<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>&nbsp; Left Side Tab Menu</h3>
        <div class="col-xs-4">
            <ul class="nav nav-tabs tabs-left">
                <li class="active"><a href="#HTML5" data-toggle="tab">HTML5</a></li>
                <li><a href="#CSS3" data-toggle="tab">CSS3</a></li>
                <li><a href="#JavaScript" data-toggle="tab">JavaScript</a></li>
                <li><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>
        <div class="col-xs-8">
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="HTML5">
                	<div class="my_text">HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</div>

					  <div class="my_text">It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and Document Object Model (DOM) Level 2 HTML.</div>
                <div class="tab-pane" id="CSS3">
                	<div class="my_text">The CSS was started to develop around 1998. And till 2009, it was under development. The first working draft of CSS3 came in 19-01-2001. but it was initially declared early in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces, Selectors Level 3, Color.</div>
					  <h4>CSS3 Modules</h4>
					 <div class="my_text">CSS3 has been split into "modules". It contains the "old CSS specification". In addition, new modules are added.</div>
                <div class="tab-pane" id="JavaScript">
                	<div class="my_text">JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. All modern web browsers on desktops, tablets, and smart phones are using JavaScript. JavaScript is part of the triad of technologies that all Web developers must learn: HTML(Hyper Text Markup Language) to specify the content of web pages, CSS(Cascading Style Sheets) to specify the presentation of web pages, and JavaScript to specify the behavior of web pages.</div>
                <div class="tab-pane" id="jQuery">
                	<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 class="tab-pane" id="Bootstrap">
                	<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 class="tab-pane" id="AngularJS">
                	<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>
  margin:30px auto 20px;
.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:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;

.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;
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
.vertical-text {
  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: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);