Live Demo - User Profile Detail Page Design With Bootstrap 4

See Free Live Demo example of New User profile detail page design usign bootstrap 4 and html,css. this is user profile web design. user profile detail page design with background banner image. profile page design in bootstrap 4 with free source code. bootstrap user profile page template free. user profile design with follow butt...

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="custom.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container main-secction">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 image-section">
                <img src="http://nicesnippets.com/demo/Nature-Night-Sky-Stars-Blurred-Light-Show-Mountains-WallpapersByte-com-1920x1080.jpg">
            </div>
            <div class="row user-left-part">
                <div class="col-md-3 col-sm-3 col-xs-12 user-profil-part pull-left">
                    <div class="row ">
                        <div class="col-md-12 col-md-12-sm-12 col-xs-12 user-image text-center">
                            <img src="http://nicesnippets.com/demo/1499344631_malecostume.png">
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 user-detail-section1 text-center">
                            <button class="btn btn-defult follow "><i class="fa fa-user-o" aria-hidden="true"></i> FOLLOW</button>
                        </div>
                        <div class="row user-detail-row">
                            <div class="col-md-12 col-sm-12 user-detail-section2 pull-left">
                            <div class="border"></div>
                                <p>FOLLOWER</p>
                                <span>320</span>
                            </div>
                            <div class="col-md-12 col-sm-12 user-detail-section2 pull-right">
                                <div class="border"></div>
                                <p>FOLLOWING</p>
                                <span>147</span>
                            </div>
                        </div>
                        <div class="col-md-12 user-detail-section2">
                            <div class="border"></div>
                            <p>PERFORMANCE</p>
                            <span>56 <small>and 42 review</small></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 col-sm-9 col-xs-12 pull-right profile-right-section">
                    <div class="row profile-right-section-row">
                        <div class="col-md-12 profile-header">
                            <div class="row">
                                <div class="col-md-8 col-sm-6 col-xs-6 profile-header-section1 pull-left">
                                    <h1>Mario Mendez</h1>
                                    <p>Senior Architect</p>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-6 profile-header-section1 text-right pull-rigth">
                                    <button class="btn btn-info req-btn"> REQUEST</button>                          
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-8  profile-tag-section text-center">
                                    <div class="row">
                                        <div class="col-md-3 col-sm-3 profile-tag">
                                            <a href="#"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></a>
                                            <p>info</p>
                                        </div>
                                        <div class="col-md-3 col-sm-3 profile-tag">
                                            <a href="#"><i class="fa fa-address-book" aria-hidden="true"></i></a>
                                            <p>feed</p>
                                        </div>
                                        <div class="col-md-3 col-sm-3 profile-tag">
                                            <a href="#"><i class="fa fa-id-card-o" aria-hidden="true"></i></a>
                                            <p>Agenda</p>
                                        </div>
                                        <div class="col-md-3 col-sm-3 profile-tag">
                                            <a href="#"><i class="fa fa-paperclip" aria-hidden="true"></i></a>
                                            <p>Resume</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 img-main-rightPart">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row image-right-part">
                                                <div class="col-md-6 pull-left image-right-detail">
                                                    <p>TODAYHIGHLIGHT</p>
                                                </div>
                                                <div class="col-md-6 pull-right image-right-detail text-right">
                                                    <span><a href="http://nicesnippets.com">more</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div  class="col-md-12 image-right">
                                            <img src="http://nicesnippets.com/demo/Nature-Night-Sky-Stars-Blurred-Light-Show-Mountains-WallpapersByte-com-1920x1080.jpg">
                                        </div>
                                        <div class="col-md-12 image-right-detail-section2">
                                            <p>Urban planning consulation</p>
                                            <span>Lorem ipsum dolor sit amet, consectetur adipisibj.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

body{
  background-color: #f1f1f1;
}
.border{
  border-bottom:1px solid #F1F1F1;
  margin-bottom:10px;
}
.main-secction{
  box-shadow: 10px 10px 10px;
}
.image-section{
  padding: 0px;
}
.image-section img{
  width: 100%;
  height:250px;
  position: relative;
}
.user-image{
  position: absolute;
  margin-top:-50px;
}
.user-left-part{
  margin: 0px;
}
.user-image img{
  width:100px;
  height:100px;
}
.user-profil-part{
  padding-bottom:30px;
  background-color:#FAFAFA;
}
.follow{
  width:50%;
  margin-top:70px;
  font-size:12px;
  border:1px solid #DDDDDD;
  background-color: #fff;
  font-weight: 600; 
}
.user-detail-row{
  margin:0px; 
}
.user-detail-section2 p{
  font-size:12px;
  padding: 0px;
  margin: 0px;
}
.user-detail-section2{
  margin-top:10px;
}
.user-detail-section2 span{
  color:#7CBBC3;
  font-size: 20px;
}
.user-detail-section2 small{
  font-size:12px;
  color:#D3A86A;
}
.profile-right-section{
  padding: 20px 0px 10px 15px;
  background-color: #FFFFFF;  
}
.profile-right-section-row{
  margin: 0px;
}
.profile-header-section1 h1{
  font-size: 25px;
  margin: 0px;
}
.profile-header-section1 p{
  color:#878787;
}
.req-btn{
  height:30px;
  font-size:12px;
}
.profile-tag{
  padding: 10px;
  border:1px solid #F6F6F6;
}
.profile-tag p{
  font-size: 12px;
  color:#ADADAD;
}
.profile-tag i{
  color:#ADADAD;
  font-size: 20px;
}
.image-right-part{
  background-color: #FCFCFC;
  margin: 0px;
  padding: 5px;
}
.img-main-rightPart{
  background-color: #FCFCFC;
}
.image-right-detail{
  padding: 0px;
}
.image-right-detail p{
  font-size: 12px;
}
.image-right-detail a:hover{
  text-decoration: none;
}
.image-right img{
  width: 100%;
}
.image-right-detail-section2{
  margin: 0px;
}
.image-right-detail-section2 p{
  color:#38ACDF;
  margin:0px;
}
.image-right-detail-section2 span{
  color:#7F7F7F;
}