Bootstrap Snippet social icons with right 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
<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="container">
    <div class="row">
    <div class="share-it">
        <div class="facebook">
         <a href="#"><i class="fa fa-facebook"></i></a>
        </div>
        <div class="twitter">
         <a href="#"><i class="fa fa-twitter"></i></a>
        </div>
        <div class="google hidden-xs">
         <a href="#"><i class="fa fa-google-plus"></i></a>
        </div>
        <div class="rss">
         <a href="#"><i class="fa fa-rss"></i></a>
        </div>
        <div class="linkedin">
         <a href="#"><i class="fa fa-linkedin"></i></a>
        </div>
        <div class="youtube cboxElement">
         <a href="#"><i class="fa fa-youtube"></i></a>
        </div>
      </div>
    </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
.share-it{
    position:fixed;
    min-height:200px;
    width:40px;
    background:#fff;
    right:0;
    z-index:9;
    top:40%;
}   
.share-it i{
    font-size:16px;
}
    
a.multipage{background:#ee3046; border:2px #ee3046 solid; color:#fff;}  
a.multipage:hover{background:#fff; border:2px #fff solid; color:#333;}  
    
    
    .facebook{margin:0 auto; float:left; margin-right:4px;}
.facebook  a{
    color:#fff;
    padding:10px 16px;
    background-color:#527aba;
    display:inline-block;
    transition:0.5s ease;
}
.facebook  a:hover{
    color:#fff;
    padding:10px 20px;
    margin-left:-20px;
    background-color:#527aba;
    display:inline-block;
}
.twitter{margin:0 auto; float:left; margin-right:4px;}
.twitter  a{
    color:#fff;
    padding:10px 16px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social icons with right"
Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"social icons with right" Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"social icons with right"
Bootstrap 3.3.0 Snippet by naimansari