"Social Widget"
Bootstrap 3.3.0 Snippet by mohsinirshad

<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" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <div class="container"> <div class="row"> <h2 class="text-center">Social Widget</h2> </div> <div class="row"> <div class="col-md-4"> <div class="widget-area no-padding blank"> <div class="social-widget"> <span id="fb"><i class="fa fa-facebook"></i></span> <ul> <li><p>1,265<i>Friends</i></p></li> <li><p>235<i>Likes</i></p></li> </ul> </div><!-- Social Widget --> </div><!-- Widget Area --> </div> <div class="col-md-4"> <div class="widget-area no-padding blank"> <div class="social-widget"> <span id="twitter"><i class="fa fa-twitter"></i></span> <ul> <li><p>3,345<i>Tweets</i></p></li> <li><p>984<i>Followers</i></p></li> </ul> </div><!-- Social Widget --> </div><!-- Widget Area --> </div> <div class="col-md-4"> <div class="widget-area no-padding blank"> <div class="social-widget"> <span id="googleplus"><i class="fa fa-google-plus"></i></span> <ul> <li><p>1,265<i>Friends</i></p></li> <li><p>235<i>Shares</i></p></li> </ul> </div><!-- Social Widget --> </div><!-- Widget Area --> </div> </div> </div>
.widget-area.blank { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } body .no-padding { padding: 0; } .widget-area { background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); -ms-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); -o-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); float: left; margin-top: 30px; padding: 25px 30px; position: relative; width: 100%; } .social-widget { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; float: left; overflow: hidden; width: 100%; } html * { outline: 0 !important; } .social-widget > span#twitter { background: #48a4dc; color: #48a4dc; } .social-widget > span#fb { background: #3b5998; color: #3b5998; } .social-widget > span#googleplus { background: #ff604f; color: #ff604f; } .social-widget > span { float: left; font-size: 28px; height: 110px; line-height: 110px; text-align: center; width: 100%; } .social-widget > span > i { background: none repeat scroll 0 0 #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 60px; line-height: 60px; width: 60px; } .social-widget > ul { background: none repeat scroll 0 0 #fff; float: left; margin: 0; padding: 0; position: relative; width: 100%; } .social-widget > ul:before { border-bottom: 9px solid #f0f0f0; border-left: 9px solid transparent; border-right: 9px solid transparent; content: ""; left: 50%; margin-left: -9px; position: absolute; top: -8px; } .social-widget > ul > li { float: left; list-style: none outside none; padding: 17px 0; position: relative; text-align: center; width: 50%; background: #f0f0f0; } .social-widget > ul > li { float: left; list-style: none outside none; padding: 17px 0; position: relative; text-align: center; width: 50%; background: #f0f0f0; } .social-widget p { color: #333333; font-size: 20px; font-weight: 500; } p { font-family: Roboto; font-size: 13px; font-weight: normal; margin: 0; color: #777777; letter-spacing: 0.30px; float: left; width: 100%; line-height: 24px; } .social-widget li > p > i { color: #777777; float: left; font-family: Lato; font-size: 13px; font-style: normal; font-weight: normal; letter-spacing: 0.3px; line-height: 24px; text-align: center; width: 100%; }

Related: See More


Questions / Comments: