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 button,following,follower,performance,different types of tab,name,image.
We allows to free snippets of user profile ui design , you can download full code of user profile web design layout. Here in this post i will give you example of bootstrap profile page html snippet and you will get simple code of html, css and jquery. In user profile page template free download snippet i give you three tab with html, css and js, you can easily get code of profile page design in bootstrap 4 with source code layout.
<!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="//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="//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="//nicesnippets.com">more</a></span>
</div>
</div>
</div>
<div class="col-md-12 image-right">
<img src="//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;
}