<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> <div class="container"> <div class="row user-menu-container square"> <div class="col-md-7"> <div class="row coralbg white"> <div class="col-md-6 no-pad"> <div class="user-pad"> <h3>Welcome back, Jessica</h3> <h4 class="white"><i class="fa fa-check-circle-o"></i> San Antonio, TX</h4> <h4 class="white"><i class="fa fa-twitter"></i> CoolesOCool</h4> <button type="button" class="btn btn-labeled btn-info" href="#"> <span class="btn-label"><i class="fa fa-pencil"></i></span>Update</button> </div> </div> <div class="col-md-6 no-pad"> <div class="user-image"> <img src="https://farm7.staticflickr.com/6163/6195546981_200e87ddaf_b.jpg" class="img-responsive thumbnail"> </div> </div> </div> </div> </div> </div>

.square, .btn { border-radius: 0px!important; } /* -- color classes -- */ .coralbg { background-color: #FA396F; } .coral { color: #FA396f; } .turqbg { background-color: #46D8D2; } .turq { color: #46D8D2; } .white { color: #fff!important; } /* -- The btn stylings for the btn icons -- */ .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} .btn-labeled {padding-top: 0;padding-bottom: 0;} /* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */ .user-pad { padding: 20px 25px; } .no-pad { padding-right: 0; padding-left: 0; padding-bottom: 0; } .user-details { background: #eee; min-height: 333px; } .user-image { max-height:200px; overflow:hidden; } /* -- media query for user profile image -- */ @media (max-width: 767px) { .user-image { max-height: 400px; } }

$(document).ready(function() { var $btnSets = $('#responsive'), $btnLinks = $btnSets.find('a'); $btnLinks.click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.user-menu>div.user-menu-content").removeClass("active"); $("div.user-menu>div.user-menu-content").eq(index).addClass("active"); }); }); $( document ).ready(function() { $("[rel='tooltip']").tooltip(); $('.view').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); });