Bootstrap snippet: SocialBox

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.

<!--Font Awesome --> <script src=""></script> <div> <div class="container"> <div class="row"> <div class="col-md-4 col-xs-12 col-md-offset-3"> <!-- Snippet Start here --> <div class="row"> <div class="col-md-12 col-xs-12 box-header box-header-icon"> <div class="col-md-12 box-header-icon"> <button class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button"> <i class="fa fa-angle-down" id="box-options"> </i> </button> <ul aria-labelledby="box-options" class="dropdown-menu pull-right"> <li> <a href="#"> I don't want to see this </a> </li> <li> <a href="#"> Unfollow Facundo Chuburu </a> </li> <li class="divider"> </li> <li> <a href="#"> Get Notification </a> </li> </ul> </div> <div class="row"> <div class="col-md-12"> <h3 class="text-center"> <i class="fa fa-desktop box-tittle-icon" aria-hidden="true"></i><a href="" class="box-tittle">Social</a> </h3> </div> </div> </div> <div class="col-md-12 col-xs-12 box-content"> <ul class="list-unstyled text-center"> <li> <a href="#"> <i class="fa fa-twitter"> </i> @facuch19 </a> </li> <li> <a href="#"> <i class="fa fa-facebook"> </i> Facundo Chuburu </a> </li> <li> <a href="#"> <i class="fa fa-dribbble"> </i> facuch </a> </li> <li> <a href="#"> <i class="fa fa-linkedin"> </i> Facundo Chuburu </a> </li> </ul> </div> <!-- Snippet End here --> </div> </div> </div> </div> </div>
body { background-color: #d1c6c6; margin-top: 120px; } .box-header button { color: #f5f5f5; border: none; } .box-header button i { color: gray; } .box-header button:hover i { color: black; -ms-transform: scale(1.3); /* IE 9 */ -webkit-transform: scale(1.3); /* Chrome, Safari, Opera */ transform: scale(1.3); } .box-header-icon{ padding: 0px !important; } .box-header { border-radius: 5px; background-color: #f5f5f5; border-bottom: 1px solid #c9c9c9; padding-bottom: 20px !important; } .box-tittle-icon{ color:black; margin-right: 10px; } .box-content { padding-top: 10px; padding-bottom: 10px; background-color: white; line-height: 2.3; display: inline-block !important; border-radius: 5px; } .box-tittle{ color:black !important; } .box-content ul .fa-twitter { color: #77C7F7; } .box-content ul .fa-facebook { color: #3B5998; } .box-content ul .fa-dribbble { color: red; } .box-content ul .fa-linkedin { color: #006BA0; } .box-content ul li a { text-decoration: none; } .box-content ul li { transition: 0.5s 0s ease-out; } .box-content ul li:hover { font-size: 18px; text-decoration: none; } .btn-options { color: #f5f5f5; }


  Sep 4th, 16:12