HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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 ---------->
<!-- begin side tab section -->
<div class="container">
    <div class="row">
        <div class="col-md-12 mb mt">
            
            <div class="nav-tabs-three">
                <!-- Design Three Sidebar -->
                <div class="nav-tabs-three-sidebar">
                    <ul class="nav">
                        <li class="active"><a href="#tab1" data-toggle="tab" role="tab" aria-expanded="true"><i class="fa fa-angle-right"></i>Case Summary </a></li>
                        <li class=""><a href="#tab2" data-toggle="tab" role="tab" aria-expanded="false">Initial Feedback</a></li>
                        <li class=""><a href="#tab3" data-toggle="tab" role="tab" aria-expanded="false">Expert Fee's and legal experience</a></li>
                    </ul>
                </div>
                <!-- Design Three Content -->
                <div class="nav-tabs-three-content">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1">
                            
                                <img src="http://i.imgur.com/shS37ML.jpg" alt="tab1" class="img img-responsive">
                        </div>
                        <div class="tab-pane fade" id="tab2">
                            
                                <img src="http://i.imgur.com/blvT4UQ.jpg" alt="tab1" class="img img-responsive">
                            
                        </div>
                        <div class="tab-pane fade" id="tab3">
                            
                                <img src="http://i.imgur.com/phcSHZz.jpg" alt="tab1" class="img img-responsive">
                        </div>
                    </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
/* Nav tabs */
.tab-content {
    padding-top: 10px;
}
.tab-content .tab-pane {    
    position: relative;
}
.active.in {
z-index: 0;
}
/* Nav tabs style 3 */
.nav-tabs-three .nav-tabs-three-sidebar {
    width:370px;
    float:left;
    z-index:22;
}
.nav-tabs-three .nav-tabs-three-sidebar ul{
    padding:0px;
    margin:0px;
}
.nav-tabs-three .nav-tabs-three-content{
    margin-left:390px;
    overflow: hidden;
}
@media (max-width: 990px){
    .nav-tabs-three{
        max-width:500px;
        margin:10px auto;
    }
    .nav-tabs-three .nav-tabs-three-sidebar{
        width:100%;
        float:none;
        position:static;
      text-align: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$('*[data-toggle="tab"]').on('shown.bs.tab', function (e) {    
      var target = $(this).attr('href');  
      
    $(target).css('left','-'+$(window).width()+'px');   
    var left = $(target).offset().left;
    $(target).css({left:left}).animate({"left":"0px"}, 1500);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Side Tab - Panel "
Bootstrap 3.3.0 Snippet by killa-kyle

Related: See More

Questions / Comments:

"Side Tab - Panel " Bootstrap 3.3.0 Snippet by killa-kyle

Related: See More

Questions / Comments:

"Side Tab - Panel "
Bootstrap 3.3.0 Snippet by killa-kyle