"Bootstrap BioData Profile Portfolio Design"
Bootstrap 4.0.0 Snippet by bhargavraviya

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BrahmSamaj</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body><div class="container portfolio"> <div class="row"> <div class="col-md-12"> <div class="heading"> <img src="https://image.ibb.co/cbCMvA/logo.png" /> </div> </div> </div> <div class="bio-info"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <div class="bio-image"> <img src="http://raviyafitness.com/wp-content/uploads/2018/05/IMG_20180101_164242_HDR.jpg" alt="image" /> </div> </div> </div> </div> <div class="col-md-6"> <div class="bio-content"> <h1>Bhargav Raviya</h1> <h6>Age / Height : 21 Yrs. / 5ft 9In</h6> <h6>Caste : Gujarati</h6><h6>Mother Tongue : Hindi</h6><h6>Location : India</h6><h6>Education : Bachelors in Commerce</h6><h6>Profession : Web Developer</h6><h6>Marital Status : Un Married</h6> <p>My Broter Vastal Raviya Has Done BBM & Clear CS (inter) Also Doing LLB</p> <button class="btn btn-primary" type="button"><i class="fa fa-download"></i> Download BioData</button> <button class="btn btn-danger" type="button"><i class="fa fa-heart"></i> Express Interest</button> </div> </div> </div> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
body { background:linear-gradient(90deg, #e8e8e8 50%, #3d009e 50%); } .portfolio { padding:6%; text-align:center; } .heading { background:#fff; padding:1%; text-align:left; box-shadow:0px 0px 4px 0px #545b62; } .heading img { width:10%; } .bio-info { padding:5%; background:#fff; box-shadow:0px 0px 4px 0px #b0b3b7; } .name { font-family:'Charmonman', cursive; font-weight:600; } .bio-image { text-align:center; } .bio-image img { width:350px; height:350px; border-radius:50%; } .bio-content { text-align:left; } .bio-content p { font-weight:600; font-size:30px; }

Related: See More

BLK• Design System
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: