"Bootstrap Social Media Cards"
Bootstrap 3.3.0 Snippet by nirav.mandli

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" /> <link href="https://stackpath.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="text-center"> <h2 class="text-uppercase">Social Media Links</h2> <hr /> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-instagram" aria-hidden="true"></i> <div class="social-media-name">Instagram</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-twitter" aria-hidden="true"></i> <div class="social-media-name">twitter</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-facebook" aria-hidden="true"></i> <div class="social-media-name">facebook</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-google-plus" aria-hidden="true"></i> <div class="social-media-name">Google Plus</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-github" aria-hidden="true"></i> <div class="social-media-name">Github</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> <div class="col-md-4"> <div class="card"> <i class="fa fa-5x fa-pinterest" aria-hidden="true"></i> <div class="social-media-name">pinterest</div> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button class="btn btn-link">Learn More  <span><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></button> </div> </div> </div> <div class="form-group"></div> </div>
::selection { background-color: #C3CFE2; } body { font-family: 'Roboto', sans-serif; } /*h2 {*/ /* position: relative;*/ /*}*/ /*h2:after {*/ /* position: absolute;*/ /* bottom: -6px;*/ /* content:"";*/ /* width: 100px;*/ /* height: 2px;*/ /* margin: 0 auto;*/ /* left: 0;*/ /* right: 0;*/ /* background: #b83b3b;*/ /* display:inline-block;*/ /*}*/ .card { margin-top: 20px; background-color: #ffffff; border: 1px solid #ddd; padding: 25px 30px; border-radius: 3px; text-align: center; } .card .social-media-name { font-size: 18px; font-family: 'Roboto', sans-serif; font-weight: 500; margin: 10px 0; text-transform: uppercase; letter-spacing: 1px; } .card .btn-link { text-decoration:none; }

Related: See More


Questions / Comments: