Bootstrap Snippet Vendor Profile- user View using HTML CSS jQuery

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 ---------->
<div  class="panel btn-pref btn-group btn-group-justified " role="group" style="margin-top:10px;height:720px;wight:900px; background-color:#adc;"  >
        <center>
        <div  class="tab-content " style= "margin-top:10px; " >
              <div class="tab-pane panel  active" id="tab1"  >
                         <h2> <br> ... Tab 1</h2>
               </div>
               <div class="tab-pane panel " id="tab2" >
                    <form role="form" class="form-inline" >
                       <h2> <br> ... Tab 2</h2>
                     </form>
                </div>
                <div class="tab-pane panel " id="tab3" >
                    <form role="form" class="form-inline" >
                        <h2> <br> ... Tab 3</h2>
                     </form>
                </div>
                <div class="tab-pane panel fade in " id="tab4" >
                    <form role="form" class="form-inline" >
                        <h2> <br> ... Tab 4</h2>
                     </form>
                </div>
                <div class="tab-pane panel fade in " id="tab5" >
                    <form role="form" class="form-inline">
                        <h2> <br> ... Tab 5</h2>
                     </form>
                </div>
                <div class="tab-pane panel fade in " id="tab6" >
                    <form role="form" class="form-inline">
                        <h2> <br> ... Tab 6</h2>
                     </form>
                </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
/* Related to SIde MENU Text */
.tab-pane{
    height:200%;
    width:100%;
    }
.tab-pane{
    height:absoulte;
    width:100%;
    }
    
.tabnav{
      margin-top:-18px;
    }
.btn-nav {
   color: #e92d00;
    background-color: #fff;
    border: 1px solid #e0e1db;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.btn-nav:hover {
     color: green;
     cursor: pointer;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
.btn-nav.active {
    background: grey;
    color: #1dcaff;
    padding: auto;
    border-top:2px solid #1dcaff ;
    border-bottom:2px solid #1dcaff  ;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var activeEl = 0;
$(function() {
    var items = $('.btn-nav');
    $( items[activeEl] ).addClass('active');
    $( ".btn-nav" ).click(function() {
        $( items[activeEl] ).removeClass('active');
        $( this ).addClass('active');
        activeEl = $( ".btn-nav" ).index( this );
        
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Vendor Profile- user View"
Bootstrap 3.3.0 Snippet by krishna1217

Related: See More

Questions / Comments:

"Vendor Profile- user View" Bootstrap 3.3.0 Snippet by krishna1217

Related: See More

Questions / Comments:

"Vendor Profile- user View"
Bootstrap 3.3.0 Snippet by krishna1217