<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <div class="member"> <div class="row"> <div class="col-md-2 member-card"> <div class="row"> <div class="col-md-4 no-padding"> <img class="img-fluid rounded" src="#"/> </div> <div class="col-md-8 info"> <h6> Donald Trump </h6> <p>+976 99696681</p> </div> </div> </div> </div> </div>

.member { display: block; font-family: "Segoe UI", 'Roboto Condensed', sans-serif; text-transform: uppercase; } .member-card { border: 1px solid #e6e6e6; background: #FFF; margin-left: 15px; border-radius: 4px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; padding: 0; } .member-card img { padding: 4px; } .member-card .info { border-left: 1px solid #e6e6e6; }