How do I use this Bootstrap snippet?

Load Bootstrap 3.3.4, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.3.4 and inherits its responsive grid and components.

Bootstrap html snippet. user profile cover like facebook

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.4 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="container">
<div class="col-md-8">
    <div class="profile clearfix">                            
        <div class="image">
            <img src="https://www.bootdey.com/image/1000x300/FFB6C1" class="img-cover">
        </div>                            
        <div class="user clearfix">
            <div class="avatar">
                <img src="https://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-thumbnail img-profile">
            </div>                                
            <h2>Martin maoth</h2>                                
            <div class="actions">
                <div class="btn-group">
                    <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Add to friends"><span class="glyphicon glyphicon-plus glyphicon glyphicon-white"></span> Friends</button>
                    <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Send message"><span class="glyphicon glyphicon-envelope glyphicon glyphicon-white"></span> Message</button>
                    <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Recommend"><span class="glyphicon glyphicon-share-alt glyphicon glyphicon-white"></span> Recommend</button>
                </div>
            </div>                                                                                                
        </div>                          
        <div class="info">
            <p><span class="glyphicon glyphicon-globe"></span> <span class="title">Address:</span>  St. Revutskogo, Kiev, Ukraine</p>                                    
            <p><span class="glyphicon glyphicon-gift"></span> <span class="title">Date of birth:</span> 14.02.1989</p>                                
        </div>                              
    </div>
</div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.4 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

.profile {
  width: 100%;
  position: relative;
  background: #FFF;
  border: 1px solid #D5D5D5;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.profile .image {
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  border: 5px solid #FFF;
}

.profile .user {
  position: relative;
  padding: 0px 5px 5px;
}

.profile .user .avatar {
  position: absolute;
  left: 20px;
  top: -85px;
  z-index: 2;
}

.profile .user h2 {
  font-size: 16px;
  line-height: 20px;
  display: block;
  float: left;
  margin: 4px 0px 0px 135px;
  font-weight: bold;
}

.profile .user .actions {
  float: right;
}

.profile .user .actions .btn {
  margin-bottom: 0px;
}

.profile .info {
  float: left;
  margin-left: 20px;
}

.img-profile{
    height:100px;
    width:100px;
}

.img-cover{
    width:800px;
    height:300px;
}

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}