Bootstrap Snippet Social Float Right Side using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<nav class="social">
          <ul>
              <li><a href="ref"><i class="fa fa-facebook"></i><b>Facebook</b></a></li>
              <li><a href="ref"><i class="fa fa-twitter"></i><b>Twitter</b></a></li>
              <li><a href="ref"><i class="fa fa-google-plus"></i><b>Google +</b></a></li>
              <li><a href="ref"><i class="fa fa-linkedin"></i><b>LinkedIn</b></a></li>
              <li><a href="ref"><i class="fa fa-youtube"></i><b>YouTube</b></a></li>
              <li><a href="ref"><i class="fa fa-instagram"></i><b>Instagram</b></a></li>
          </ul>
      </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
.social {
    position: fixed;
    top: 20px;
    right:0px;
}
.social ul {
  padding: 0px;
  -webkit-transform: translate(270px, 0);
  -moz-transform: translate(270px, 0);
  -ms-transform: translate(270px, 0);
  -o-transform: translate(270px, 0);
  transform: translate(270px, 0);
}
.social ul li {
    display: block;
    margin: 3px;
    background: rgba(171, 219, 209, 0.36);
    width: 300px;
    text-align: left;
    padding: 5px;
    -webkit-border-radius: 30px 0 0 30px;
    -moz-border-radius: 30px 0 0 30px;
    border-radius: 30px 0 0 30px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.social ul li:hover {
  -webkit-transform: translate(-110px, 0);
  -moz-transform: translate(-110px, 0);
  -ms-transform: translate(-110px, 0);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social Float Right Side"
Bootstrap 4.0.0 Snippet by fdelgado1433

Related: See More

Questions / Comments:

"Social Float Right Side" Bootstrap 4.0.0 Snippet by fdelgado1433

Related: See More

Questions / Comments:

"Social Float Right Side"
Bootstrap 4.0.0 Snippet by fdelgado1433