"Clean Contact Box"
Bootstrap 3.0.0 Snippet by NaszvadiG

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <aside class="sidebar"> <div class="single contact-info"> <h3 class="side-title">Contact Information</h3> <ul class="list-unstyled"> <li> <div class="icon"><i class="fa fa-map-marker"></i></div> <div class="info"><p>1600 Amphitheatre Parkway <br>St Martin Church</p></div> </li> <li> <div class="icon"><i class="fa fa-phone"></i></div> <div class="info"><p>098-765-4321<br>123-456-7890</p></div> </li> <li> <div class="icon"><i class="fa fa-envelope"></i></div> <div class="info"><p>info@example.com<br>sales@yourdomain.com</p></div> </li> </ul> </div> </aside> </div> </div> </div> </body> </html>
aside.sidebar .single { padding: 30px 15px; margin-top: 40px; background: #fcfcfc; border: 1px solid #f0f0f0; } aside.sidebar .single h3.side-title { margin: 0; margin-bottom: 10px; padding: 0; font-size: 20px; color: #333; text-transform: uppercase; } aside.sidebar .single h3.side-title:after { content: ''; width: 60px; height: 1px; background: #00b0ff; display: block; margin-top: 6px; } .single.contact-info { background: none; border: none; } .single.contact-info li { margin-top: 30px; } .single.contact-info li .icon { display: block; float: left; margin-right: 10px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #f0f0f0; color: #00b0ff; text-align: center; line-height: 50px; } .single.contact-info li .info { overflow: hidden; }

Related: See More

Paper Kit 2 PRO Angular
BS4 clean & simple invoice template
BS4 Simple & Clean Pricing table
Simple & Clean 404 Error Page style

Questions / Comments: