<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="col-md-12 bg-wrapper"> <div class="profile-container"> <div class="container"> <div class="row"> <div class="header col-md-2"> <div class="py-10"> <img src="https://cdn.dribbble.com/users/35810/screenshots/12863854/media/a47d93251876a69537c3ae3ac0122a6c.jpg?compress=1&resize=1600x1200" alt=""> </div> </div> <div class="body col-md-4"> <div class="py-10 name"> <h3>Eslam abdallah</h3> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos vel debitis porro ipsa quibusdam consectetur? Perspiciatis quas non nostrum animi natus minus explicabo molestiae numquam iure. Harum quia voluptatibus quaerat! </div> </div> <div class="foot col-md-2"> <div class="py-10 seller-links"> <h3>Seller Links</h3> </div> <ul> <li> <a href="">FaceBook</a> </li> <li> <a href="">FaceBook</a> </li> <li> <a href="">FaceBook</a> </li> </ul> </div> <div class="foot col-md-4"> <div class="py-10 seller-adress"> <h3>Adress</h3> </div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum totam animi pariatur necessitatibus cum at quibusdam odit accusamus incidunt mollitia, possimus, maxime expedita ipsa nisi obcaecati eligendi, commodi rem? Quasi. </p> </div> </div> </div> </div> </div>

.bg-wrapper { min-height: 200px; max-height: 300px; background: #161616; width: 100%; text-align: center; } .profile-container{ background: white; padding: 20px; display: inline-block; margin: 10px auto ; width: 100%; } .header img{ max-width: 200px; }