Bootstrap Snippet SmahQ tabs using HTML CSS Bootstrap

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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    
   
   
   <!--brand new dsign-->
  
   <div class="container"style = " border-style: solid;
    border-width: .4px; border-color: #dbdbdb; margin-top: 100px; width:60%; background-color: white;">
    <div class="col-sm-3">
    <nav class="nav-sidebar">
        <ul class="nav tabs" style = "font-size: 16px;">
          <li class="active"><a href="#tab1" data-toggle="tab">Edit Profile</a></li>
          <li class=""><a href="#tab2" data-toggle="tab">Change Password</a></li>
          <li class=""><a href="#tab3" data-toggle="tab">Social Media</a></li>
          <li class=""><a href="#tab4" data-toggle="tab">Email and SMS</a></li>     
          <li class=""><a href="#tab5" data-toggle="tab">Pricing and Subscriptions</a></li>                               
        </ul>
    </nav>
        
</div>
<!-- tab content -->
<div class="tab-content">
<div class="tab-pane active text-style" id="tab1">
     <div class="col-sm-6" style="    border-left: 1px solid #ddd;"> 
      <form class="user-form" name="userForm" novalidate>
         
                    
                  <div class="user-form__edit-photo--container">
                       
                        <aside class="user-form__edit-photo">
                            <button type="button" onclick="document.getElementById('fileInput').click()">
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
        .blogShort{ border-bottom:1px solid #ddd;}
.add{background: #333; padding: 10%; height: 300px;}
.nav-sidebar { 
    width: 100%;
    padding: 30px 0; 
}
.nav-sidebar a {
    color: #333;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    transition: all 0.08s linear;
}
.nav-sidebar .active a { 
    cursor: default;
    color: #000000; 
}
.nav-sidebar .active a:hover {
      color: #bbbbbb; 
     
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; 
}
.btn-blog {
    color: #ffffff;
    background-color: #E50000;
    border-color: #E50000;
    border-radius:0;
    margin-bottom:10px
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SmahQ tabs"
Bootstrap 3.0.3 Snippet by gbdevteam

Related: See More

Questions / Comments:

"SmahQ tabs" Bootstrap 3.0.3 Snippet by gbdevteam

Related: See More

Questions / Comments:

"SmahQ tabs"
Bootstrap 3.0.3 Snippet by gbdevteam