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; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog