"FB-like profile box"
Bootstrap 4.0.0 Snippet by moneya

<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 ----------> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <div class="container"> <div class="fb-profile"> <img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/> <img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example"/> <div class="fb-profile-text"> <h1>Eli Macy</h1> <p>Girls just wanna go fun.</p> </div> </div> </div> <!-- /container -->
/* ========================================================================== Author's custom styles ========================================================================== */ body { font-family: 'Open Sans', sans-serif; } .fb-profile img.fb-image-lg{ z-index: 0; width: 100%; margin-bottom: 10px; } .fb-image-profile { margin: -90px 10px 0px 50px; z-index: 9; width: 20%; } @media (max-width:768px) { .fb-profile-text>h1{ font-weight: 700; font-size:16px; } .fb-image-profile { margin: -45px 10px 0px 25px; z-index: 9; width: 20%; } }

Related: See More


Questions / Comments: