user profile description

This bootstrap snippet user profile description was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: html,widget

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-md-8">
        
        	<!--Profile Heading-->
        	<!--===================================================-->
        	<div class="panel">
        		<div class="panel-bg-cover">
        			<img class="img-responsive" src="https://lorempixel.com/700/300/nature/5/" alt="Image">
        		</div>
        		<div class="panel-media">
        			<img src="https://bootdey.com/img/Content/user_6.jpg" class="panel-media-img img-circle img-border-light" alt="Profile Picture">
        			<div class="row">
        				<div class="col-md-7">
        					<h3 class="panel-media-heading">Deyson Bejarano</h3>
        					<a href="#" class="btn-link">@amazing-dey</a>
        					<p class="text-muted mar-btm">Web and Graphic designer</p>
        				</div>
        				<div class="col-md-5 pull-right">
        					<button class="btn btn-sm btn-primary">Add Friend</button>
        					<button class="btn btn-sm btn-success btn-icon glyphicon glyphicon-envelope"></button>
        				</div>
        			</div>
        		</div>
        		<div class="panel-body">
        			<h4>Consectetur adipisicing</h4>
        			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        		</div>
        	</div>
        	<!--===================================================-->
        
        </div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
    margin-top:20px;
    background:#eee;
}

.panel {
  box-shadow: 0 2px 0 rgba(0,0,0,0.05);
  border-radius: 0;
  border: 0;
  margin-bottom: 24px;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel .panel-bg-cover {
  max-height: 180px;
  overflow: hidden;
}

.panel .panel-bg-cover img {
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
}

.panel-media {
  box-shadow: 0 -50px 20px -10px rgba(0,0,0,0.2);
  padding: 10px 15px 15px 140px;
  position: relative;
}

.panel-media-img {
  position: absolute;
  width: 96px;
  height: 96px;
  left: 20px;
  top: -48px;
}

.img-border-light {
  box-shadow: 0 0 0 4px #fff;
}

@media (min-width: 1200px){
    .text-lg-right {
      text-align: right;
    }
}

.panel-media-heading {
  color: #fff;
  position: absolute;
  top: -2.7em;
}

.btn-link {
  border-color: transparent;
}

.text-muted, a.text-muted:hover, a.text-muted:focus, a.text-muted:focus {
  color: #606060;
}

.mar-btm {
  margin-bottom: 15px;
}

.panel-body {
  padding: 25px 20px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 30th 2015, 23:05

Views: 2.3K