Bootstrap Snippet social block share butoom success in bootstrap 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
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="social-media-2.css">    
  
<div class="container">
<div class="text-center">
<div class="text-center">
<h4>Icons with text</h4>
<p>
   <a class="btn btn-social btn-facebook">
      <i class="fa fa-twitter" ></i> Sign in with Facebook santosh ghikire
    </a>
</p>
<p>
    
    <a class="btn btn-block btn-social btn-facebook btn-lg">
      <i class="fa fa-facebook"></i> Sign in with Facebook santosh ghikire
    </a>   
    
</p>
<p><span class="btn btn-block btn-danger">Santosh Ghikmire</span></p>
      
      <hr>
       <a class="btn btn-block  btn-social btn-twitter btn-lg">
      <i class="fa fa-twitter"></i> Sign in with Facebook santosh ghikire
    </a>
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
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}
.btn-social :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-social.btn-lg {
    padding-left: 61px;
}
.btn-social.btn-lg :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em;
}
.btn-social.btn-sm {
    padding-left: 38px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social block share butoom success in bootstrap"
Bootstrap 3.1.0 Snippet by Reason706

Related: See More

Questions / Comments:

"social block share butoom success in bootstrap" Bootstrap 3.1.0 Snippet by Reason706

Related: See More

Questions / Comments:

"social block share butoom success in bootstrap"
Bootstrap 3.1.0 Snippet by Reason706