HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
    <div class="social-cont">
      <div class="col-md-4">
        <span class="inline"><i class="fa fa-thumbs-up up"></i> 150</span>
        <span class="inline"><i class="fa fa-thumbs-down down"></i> 21</span>
      </div>
      <div class="col-md-8">
      <div class="social">
  <span class="text-right"><p>Share on Social</p></span>
  <a class="social-icon facebook" target="blank" data-tooltip="Facebook" href="http://www.facebook.com/SOJITRAHIREN">
    <i class="fa fa-facebook"></i>
  </a>
  <a class="social-icon twitter" target="blank" data-tooltip="Twitter" href="https://www.twitter.com/Sojitra_Hiren">
    <i class="fa fa-twitter"></i>
  </a>
  <a class="social-icon linkedin" target="blank" data-tooltip="LinkedIn" href="https://www.linkedin.com/in/hirensojitraamreli">
    <i class="fa fa-linkedin"></i>
  </a>
  <a class="social-icon google-plus" target="blank" data-tooltip="Google +" href="https://plus.google.com/+HirenSojitraa">
    <i class="fa fa-google-plus"></i>
  </a>
  <a class="social-icon email" target="blank" data-tooltip="Contact e-Mail" href="mailto:hirensojitra007@gmail.com">
    <i class="fa fa-envelope-o"></i>
  </a>
</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
.social-cont{
  border-style: solid;
  border-width: 1px;
  border-color: rgb(238, 238, 238);
  background-color: rgba(240, 240, 240, 0);
  padding-top:7px;
  padding-bottom:7px;
  display: table;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 30px;
}
.social-cont span.inline{
  display: table-cell;
  vertical-align: middle;
  height: 38px;
  font-size: 16px;
  font-family: "Roboto Bold";
  padding-right: 15px;
}
.social-cont span.inline i{
  font-size: 20px;
}
.social-cont span.inline i.up{
  color: #00b226;
}
.social-cont span.inline i.down{
  color: #b20000;
}
.social-cont .social{
  text-align: right;
  display: inline-block;
  float: right;  
}
@-webkit-keyframes fadeInRight {
  0% {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social Share - Tooltip"
Bootstrap 3.3.0 Snippet by SOJITRA

Related: See More

Questions / Comments:

"Social Share - Tooltip" Bootstrap 3.3.0 Snippet by SOJITRA

Related: See More

Questions / Comments:

"Social Share - Tooltip"
Bootstrap 3.3.0 Snippet by SOJITRA