"Bootstrap Profile Portfolio Design"
Bootstrap 4.1.1 Snippet by couchcrumb

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <div class="container portfolio"> <div class="row"> <div class="col-md-12"> <div class="heading"> <img src="https://image.ibb.co/cbCMvA/logo.png" /> <a href="http://bootsnipp.com/iframe/6AzEM" target="_blank">Best viewed full screen</a><br> </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 class="img-fluid" src="https://cdn2.gigantic.com/static/images/campaign/820x500/flatbush_zombies-5257882706.jpg" alt="image" /> <div class="vid"> <iframe width="400" height="215" src="//www.youtube.com/embed/ac7KhViaVqc" allowfullscreen=""></iframe> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="bio-content"> <h1>Flatbush Zombies</h1> <h6>Brooklyn, New York's Flatbush Zombies channel the best of the '90s East Coast rap-era on cinematic tracks full of mind-altering atmospherics and dense lyrical content. The FBZ trio was formed by Meechy Darko, Zombie Juice, and Erick Arc Elliott in 2010. Meech and Elliott grew up together in the Flatbush area of Brooklyn, and hooked up with Juice in high school, freestyling with each other until they decided to lay down official tracks. Their first release, "Thug Waffle," was released in January 2012. Showcasing Meech's gritty growl and Juice's cocky boasts over Elliott's bass-heavy laid-back production, the song and video were a hit and went viral. </h6> <p> Erick Arc Elliott</p><p> Meechy Darko</p><p>Zombie Juice</p> <div class="btn-group"> <a href="#" class="btn btn-inverse"><i class="icon-white icon-fast-backward"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-backward"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-stop"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-play"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-pause"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-forward"></i></a> <a href="#" class="btn btn-inverse"><i class="icon-white icon-fast-forward"></i></a> </div> </div> </div> </div> </div>
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{ border-radius:50%; } .bio-content{ text-align:left; } .bio-content p{ font-weight:600; font-size:30px; } .btn-group{ margin-right: 50px; }

Related: See More


Questions / Comments: