<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h4>Images with text items</h4> </div> <div class="gaadiex-list"> <div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user"> <div class="gaadiex-list-item-text"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user"> <div class="gaadiex-list-item-text"> <h3><a href="#">Catherine Crawford</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user"> <div class="gaadiex-list-item-text"> <h3><a href="#">Rosemary Jimenez</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item"><img class="gaadiex-list-item-img" src="http://www.free-icons-download.net/images/commercial-male-user-icon-32765.png" alt="List user"> <div class="gaadiex-list-item-text"> <h3><a href="#">Guy Carpenter</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h4>Icons with text items</h4> </div> <div class="gaadiex-list"> <div class="gaadiex-list-item border-b-1"> <i class="fa fa-user"></i> <div class="gaadiex-list-item-text"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item border-b-1"> <i class="fa fa-user"></i> <div class="gaadiex-list-item-text"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item border-b-1"> <i class="fa fa-user"></i> <div class="gaadiex-list-item-text"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> <div class="gaadiex-list-item border-b-1"> <i class="fa fa-user"></i> <div class="gaadiex-list-item-text"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h4>Plain text items</h4> </div> <div class="gaadiex-list"> <div class="gaadiex-list-item"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> <div class="gaadiex-list-item"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> <div class="gaadiex-list-item"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> <div class="gaadiex-list-item"> <h3><a href="#">Eric Graves</a></h3> <h4>Brunch this weekend?</h4> <p> I'll be in your neighborhood doing errands</p> </div> </div> </div> </div> </div> </div>

body {background:#e2e2e2;} /********card frame **************/ .card {position: relative; border-radius: 3px; background-color: #fff;color: #4f5256;border: 1px solid #f2f2f2;margin-bottom: 16px;background:#fff;} .card-header{ padding: 16px;margin:0px;} .card-body {position: relative; padding: 16px;} .gaadiex-list {list-style-type: none; margin: 0;padding: 0;} .gaadiex-list>.gaadiex-list-item {padding: 0 22px;} .gaadiex-list-item-img { float: left; width: 58px; height: 58px; margin-top: 20px; margin-bottom: 8px; margin-right: 20px; border-radius: 50%; } .gaadiex-list-item i { float: left; font-size:48px; width: 58px; height: 58px; margin-top: 20px; margin-bottom: 8px; margin-right: 20px; border-radius: 50%; } .border-b-1 {border-bottom: 1px solid rgba(162,162,162,.16);}