We created bootstrap 4 user profile box design. this user profile design also you can display in gride view. in this card you can display user background image,user image,follow button,send message button,user message or description and social icon(facebook,google plus,twitter). and also user profile card is responsive.

you can get code of bootstrap profile layout snippet. we give you example of profile card bootstrap , you can simple copy bellow code and use in your project. If it free snippets of bootstrap profile page html So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap profile layout snippets, click on JS Code tab get code of jquery codd for bootstrap 4 user profile card with social media snippets, same as for CSS Code tab. It's pretty easy and simple example of responsive team profile card design snippet.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="offset-lg-4 col-lg-4 col-sm-6 col-12 main-section text-center"> <div class="row"> <div class="col-lg-12 col-sm-12 col-12 profile-header"></div> </div> <div class="row user-detail"> <div class="col-lg-12 col-sm-12 col-12"> <img src="/demo/man01.png" class="rounded-circle img-thumbnail"> <h5>John Addison</h5> <p><i class="fa fa-map-marker" aria-hidden="true"></i> New Jersey, USA.</p> <hr> <a href="#" class="btn btn-success btn-sm">Follow</a> <a href="#" class="btn btn-info btn-sm">Send Messege</a> <hr> <span>Lorem ips consectetur adipisium ,eiusmod tempor incididuin reprehendeanim.</span> </div> </div> <div class="row user-social-detail"> <div class="col-lg-12 col-sm-12 col-12"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> </body> </html>
body{ background: #EFF7FE; padding-top: 15px; } .main-section{ border:1px solid #138496; background-color: #fff; } .profile-header{ background-color: #17a2b8; height:150px; } .user-detail{ margin:-50px 0px 30px 0px; } .user-detail img{ height:100px; width:100px; } .user-detail h5{ margin:15px 0px 5px 0px; } .user-social-detail{ padding:15px 0px; background-color: #17a2b8; } .user-social-detail a i{ color:#fff; font-size:23px; padding: 0px 5px; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post