Bootstrap Snippet left aligned bootstrap tabs, responsive left aligned bootstrap tab, attractive bootstrap tab using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
 <!--****************tab left***********************-->
  <!--****************tab left***********************-->
   <!--****************tab left***********************-->
                                        
                                        <div class="tabbable tabs-left left-tab-process" style="margin-bottom:25px;">
                                            <ul class="nav nav-tabs book-process-ltab text-center">
                                              <li class="active"><a href="#a" data-toggle="tab">sgfg</a></li>
                                              <li class=""><a href="#b" data-toggle="tab">jhgjhjr</a></li>
                                              <li class=""><a href="#c" data-toggle="tab">asdsds</a></li>
                                              <li class=""><a href="#d" data-toggle="tab">hjghjt</a></li>
                                              <li class=""><a href="#e" data-toggle="tab">sadsafy</a></li>
                                              <li class=""><a href="#f" data-toggle="tab">Tohjfgo:</a></li>
                                            </ul>
                                            <div class="tab-content">
                                             <div class="tab-pane active" id="a">
                                               sdfgfdgfgdfg
                                             </div>
                                             <div class="tab-pane" id="b">
                                               <div class="">
                                                            <h4>fdgfg:</h4>
                                                            sfdgfsdgfdgsfg
                                                            <p>
                                                               fdgfg.</p>
                                                        </div>
                                             </div>
                                             <div class="tab-pane" id="c">
                                               <p> On bofdgmplfderviewd</p>
                                             
                                             <div class="tab-pane" id="d">
                                               dfgfgfgfg
                                             </div>
                                             
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
 /*==================================================
 * left tab
 * ===============================================*/
 
 body{
     padding:25px;}
 
 
 .tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border: none;
}
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
    border-bottom: 0;
}
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li {
    float: none;
}
.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, .tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
    background-color: #536779;
    border-radius:0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"left aligned bootstrap tabs, responsive left aligned bootstrap tab, attractive bootstrap tab"
Bootstrap 3.3.0 Snippet by visakh9633

Related: See More

Questions / Comments:

"left aligned bootstrap tabs, responsive left aligned bootstrap tab, attractive bootstrap tab" Bootstrap 3.3.0 Snippet by visakh9633

Related: See More

Questions / Comments:

"left aligned bootstrap tabs, responsive left aligned bootstrap tab, attractive bootstrap tab"
Bootstrap 3.3.0 Snippet by visakh9633