Bootstrap Snippet Company Links using HTML CSS Bootstrap Javascript

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 ---------->
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<div  id="left-block" class="col-md-2 col-lg-1">
            <div class="row">
                <div class="text-center avatar">
                    <img src="http://placehold.it/150" alt="" class="img-circle img-responsive center-block" />
                    <h6 >Some name</h6>
                </div>
            </div>
            <div class="row">
               <nav class="navbar navbar-default sidebar" role="navigation">
                    <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>      
                    </div>
                    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                      <ul class="nav navbar-nav user-controls">
                        <li ><a href="#">SETTINGS<span style="margin-left:3px;" class="pull-right  showopacity fa fa-cog fa-2x"></span></a></li>
                        <li>
                          <a href="#">FOLLOWINGS<span class="pull-right showopacity fa fa-rss fa-2x"></span></a>
                        </li>          
                        <li ><a href="#">EDIT RULS<span  class="pull-right  showopacity fa fa-pencil-square-o fa-2x"></span></a></li>        
                        <li ><a href="#">JOBS<span class="pull-right  showopacity fa fa-briefcase fa-2x"></span></a></li>
                        <li ><a href="#">Company Links<span class="pull-right showopacity fa fa-link fa-2x"></span></a></li>
                      </ul>
                    </div>
                  </div>
                </nav> 
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
#follow_checkr {
        text-align: center
    }
main {
    margin-right: 50px;
}
.avatar img {
    padding: 15px;
    width: 150px;
    height: 150px;
    
    }
.avatar {
     text-align: center;
}
nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }
  .main{
    padding: 10px 10px 0 10px;
  }
 @media (min-width: 765px) {
    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }
    nav.sidebar:hover + .main{
      margin-left: 200px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$('ul.user-controls > li').click(function (e) {
            e.preventDefault();
            $('ul.user-controls > li').removeClass('green');
            $(this).addClass('green');
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Company Links"
Bootstrap 3.3.0 Snippet by samvel33651

Related: See More

Questions / Comments:

"Company Links" Bootstrap 3.3.0 Snippet by samvel33651

Related: See More

Questions / Comments:

"Company Links"
Bootstrap 3.3.0 Snippet by samvel33651