User profile resume

This bootstrap snippet User profile resume 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: user,profile

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

  
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippet">
  <div class="row">
      <div class="col-md-7">
      <div class="panel panel-default">
      <div class="panel-body">
                  <div class="row">
                        <div class="col-xs-12 col-sm-8">
                            <h2 class="text-primary"><b><span class="glyphicon glyphicon-user"></span> Bootdey Bootstrap</b></h2>
                            <p><strong><span class="glyphicon glyphicon-ok-circle"></span>About: </strong>Page for Web Designer</p>
                            <p><strong><span class="glyphicon glyphicon-certificate"></span>Hobbies: </strong>write rap, listen to rap music</p>
                            <p><strong><span class="glyphicon glyphicon-thumbs-up"></span>Skills: </strong>
                                <span class="label label-info tags">html5</span> 
                                <span class="label label-info tags">css3</span>
                                <span class="label label-info tags">jquery</span>
                                <span class="label label-info tags">bootstrap3</span>
                            </p>
                        </div><!--/col-->          
                        <div class="col-xs-12 col-sm-4 text-center">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="center-block img-circle img-responsive profile-img">
                                <ul class="list-inline ratings text-center" title="Ratings">
                                  <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li>
                                  <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li>
                                  <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li>
                                  <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li>
                                </ul>
                        </div><!--/col-->

                        <div class="col-xs-12 col-sm-4">
                            <h2><strong> 10,7K </strong></h2>                    
                            <p><small>Followers</small></p>
                            <button class="btn btn-success btn-block"><span class="fa fa-plus-circle"></span> Follow </button>
                        </div><!--/col-->
                        <div class="col-xs-12 col-sm-4">
                            <h2><strong>35</strong></h2>                    
                            <p><small>Following</small></p>
                            <button class="btn btn-info btn-block"><span class="fa fa-user"></span> View Profile </button>
                        </div><!--/col-->
                        <div class="col-xs-12 col-sm-4">
                            <h2><strong>58</strong></h2>                    
                            <p><small>Snippets</small></p>
                            <button type="button" class="btn btn-primary btn-block"><span class="fa fa-gear"></span> Options </button>  
                        </div><!--/col-->
                  </div><!--/row-->
              </div><!--/panel-body-->
          </div><!--/panel-->
    </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

.profile-img{box-shadow: 0 5px 15px rgba(0,0,0,.5)}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 7th 2014, 09:57

Views: 6.3K