Bootstrap snippet: profile with timeline activities

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: profile,social,timeline,activities



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row profile ng-scope"> <div class="col-md-6"> <section class="widget"> <div class="widget-body"> <div class="widget-top-overflow text-white"> <div class="height-250 overflow-hidden"><img class="img-responsive" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/19.jpg"> </div> <div class="btn-toolbar"><a href="#" class="btn btn-default btn-sm pull-right"><i class="fa fa-twitter mr-xs"></i> Follow</a> </div> </div> <div class="row"> <div class="col-sm-5 text-center"> <div class="post-user post-user-profile"><span class="thumb-xlg"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a5.jpg" alt="..."></span> <h4 class="fw-normal">Adam <span class="fw-semi-bold">Johns</span></h4> <p>UI/UX designer</p><a href="#" class="btn btn-danger btn-sm mt">&nbsp;Send <i class="fa fa-envelope ml-xs"></i>&nbsp;</a> <ul class="contacts text-right"> <li><i class="fa fa-phone fa-fw mr-xs"></i><a href="#">+375 29 555-55-55</a> </li> <li><i class="fa fa-envelope fa-fw mr-xs"></i><a href="#">psmith@example.com</a> </li> <li><i class="fa fa-map-marker fa-fw mr-xs"></i><a href="#">Minsk, Belarus</a> </li> </ul> </div> </div> <div class="col-sm-7"> <div class="stats-row stats-row-profile mt text-right"> <div class="stat-item"> <p class="value">251</p> <h5 class="name">Posts</h5> </div> <div class="stat-item"> <p class="value">9.38%</p> <h5 class="name">Conversion</h5> </div> <div class="stat-item"> <p class="value">842</p> <h5 class="name">Followers</h5> </div> </div> <p class="text-right mt-lg"><a href="#" class="label label-warning">UI/UX</a> <a href="#" class="label label-danger ml-xs">Web Design</a> <a href="#" class="label label-default ml-xs">Mobile Apps</a> </p> <p class="lead mt-lg">My name is Adam Johns and here is my new Sing user profile page.</p> <p>I love reading people's summaries page especially those who are in the same industry as me. Sometimes it's much easier to find your concentration during the night.</p> </div> </div> </div> </section> </div> <div class="col-md-6"> <section class="activities"> <h2>Activities</h2> <section class="event"><span class="thumb-sm avatar pull-left mr-sm"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a5.jpg" alt="..."></span> <h4 class="event-heading"><a href="#">Bob Nilson</a> <small><a href="#">@nils</a></small></h4> <p class="fs-sm text-muted">February 22, 2014 at 01:59 PM</p> <p class="fs-mini">There is no such thing as maturity. There is instead an ever-evolving process of maturing. Because when there is a maturity, there is ...</p> <footer> <ul class="post-links"> <li><a href="#">1 hour</a> </li> <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a> </li> <li><a href="#">Comment</a> </li> </ul> </footer> </section> <section class="event"> <h4 class="event-heading"><a href="#">Jessica Smith</a> <small>@jess</small></h4> <p class="fs-sm text-muted">February 22, 2014 at 01:59 PM</p> <p class="fs-mini">Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside my brand new HDD 40TB. Thanks god I found it!</p> <footer> <div class="clearfix"> <ul class="post-links mt-sm pull-left"> <li><a href="#">1 hour</a> </li> <li><a href="#"><span class="text-danger"><i class="fa fa-heart-o"></i> Like</span></a> </li> <li><a href="#">Comment</a> </li> </ul><span class="thumb thumb-sm pull-right"><a href="#"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a1.jpg"></a></span> <span class="thumb thumb-sm pull-right"> <a href="#"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a5.jpg"></a></span> <span class="thumb thumb-sm pull-right"> <a href="#"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a3.jpg"></a></span> </div> <ul class="post-comments mt-sm"> <li><span class="thumb-xs avatar pull-left mr-sm"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/people/a1.jpg" alt="..."></span> <div class="comment-body"> <h6 class="author fw-semi-bold">Ignacio Abad <small>6 mins ago</small></h6> <p>Hey, have you heard anything about that?</p> </div> </li> <li><span class="thumb-xs avatar pull-left mr-sm"><img class="img-circle" src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/avatar.png" alt="..."></span> <div class="comment-body"> <input class="form-control input-sm" type="text" placeholder="Write your comment..."> </div> </li> </ul> </footer> </section> <form class="mt ng-pristine ng-valid" action="#"> <div class="form-group mb-0"> <label class="sr-only" for="new-event">New event</label> <textarea class="form-control" id="new-event" placeholder="Post something..." rows="3"></textarea> </div> <div class="btn-toolbar"> <div class="btn-group"><a href="#" class="btn btn-sm btn-gray"><i class="fa fa-camera fa-lg"></i></a> <a href="#" class="btn btn-sm btn-gray"><i class="fa fa-map-marker fa-lg"></i></a> </div> <button type="submit" class="btn btn-danger btn-sm pull-right">Post</button> </div> </form> </section> </div> </div> </div>
body{margin-top:20px; background:#eee; } .widget { position: relative; margin-bottom: 30px; padding: 15px 20px; background: #fff; border-radius: 3px } .widget>footer, .widget>header { margin: -15px -20px; padding: 15px 20px } .widget>header h1, .widget>header h2, .widget>header h3, .widget>header h4, .widget>header h5, .widget>header h6 { margin: 0 } .widget>.widget-body.no-padding+footer, .widget>header+.widget-body, .widget>header+.widget-body.no-padding { margin-top: 15px } .widget>.widget-body.no-padding { margin: -15px -20px } .widget>footer { margin: 0 -20px -15px } .widget:hover .widget-controls-hover { opacity: 1 } .widget .loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .widget .loader .spinner { position: absolute; top: 50%; width: 100%; margin-top: -10px; font-size: 20px; text-align: center } .widget .widget-table-overflow { margin: 0 -20px -15px } .widget-controls { position: absolute; z-index: 1; top: 0; right: 0; padding: 14px; font-size: 12px } .widget-controls.left { left: 0; right: auto } .widget-controls.widget-controls-hover { opacity: 0; -webkit-transition: opacity .15s; transition: opacity .15s } .widget-controls>a { padding: 1px 4px; border-radius: 4px; color: rgba(0, 0, 0, .4); -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out } .widget-controls>a:hover { color: rgba(0, 0, 0, .1) } .widget-controls>a>.fa { vertical-align: middle } .widget-controls>a>.glyphicon { vertical-align: -1px } .widget-controls>.btn-group { vertical-align: baseline } .widget-controls .fa-refresh { position: relative; top: -1px } .widget-icon { opacity: .5; font-size: 42px } .widget-image { position: relative; overflow: hidden; margin: -15px -20px; border-radius: 4px } .widget-image>img { max-width: 100%; border-radius: 4px 4px 0 0; -webkit-transition: -webkit-transform .15s ease; transition: transform .15s ease; transition: transform .15s ease, -webkit-transform .15s ease } .widget-image:hover>img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .widget-image .title { position: absolute; top: 0; left: 0; margin: 20px } .widget-image .info { position: absolute; top: 0; right: 0; margin: 20px } .widget-footer-bottom { position: absolute; bottom: 0; width: 100% } .widget-sm { height: 230px } .widget-md { height: 373px } .windget-padding-md { padding: 15px 20px } .windget-padding-lg { padding: 30px 40px } .widget-body-container { position: relative; height: 100% } .widget-middle-overflow, .widget-top-overflow { position: relative; margin: 0 -20px } .widget-middle-overflow>img, .widget-top-overflow>img { max-width: 100% } .widget-top-overflow { margin-top: -15px; overflow: hidden } .widget-top-overflow, .widget-top-overflow>img { border-top-left-radius: 4px; border-top-right-radius: 4px } .widget-top-overflow>.btn-toolbar { position: absolute; top: 0; right: 0; z-index: 1; margin-right: 20px } @media (min-width:768px) { .widget-top-overflow>.btn-toolbar { top: auto; bottom: 0 } } .widget-container { min-height: 30px } .widget-container .widget:not(.fullscreened)>header { cursor: move } .widget-placeholder { background: rgba(255, 255, 255, .4); border: 1px dashed #999; margin: -1px -1px 29px } .activities { margin-top: -20px } .activities h2 { margin-left: 20px } .activities .event { margin-top: 20px; width: 100% } .timeline { position: relative; min-height: 100%; list-style: none; padding-left: 0; margin-bottom: -40px; padding-bottom: 80px } .timeline>li:after, .timeline>li:before { content: " "; display: table } .timeline>li:after { clear: both } .timeline>li+li { margin-top: 30px } .timeline:before { position: absolute; top: 0; bottom: 0; left: 24%; width: 8px; content: " "; margin-left: -4px; background-color: #fff } @media (min-width:992px) { .timeline:before { left: 50%; margin-left: -4px } } .event { background: #fff; border-radius: 4px; padding: 20px 20px 0; position: relative } .timeline .event { float: right; width: 68% } .timeline .event:before { right: 100%; content: " "; height: 0; width: 0; position: absolute; border: 10px solid transparent; border-right-color: #fff; top: 15px } .event .post-comments { margin-left: -20px; margin-right: -20px } .event>footer { margin: 20px -20px 0; padding: 10px 20px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: #f3f3f3 } .event>footer:after, .event>footer:before { content: " "; display: table } .event>footer:after { clear: both } .event>footer .thumb { margin-left: 10px } @media (min-width:992px) { .timeline .event { width: 45% } .timeline>li.on-left .event { float: left } .timeline>li.on-left .event:before { right: auto; left: 100%; border-right-color: transparent; border-left-color: #fff } } .timeline .event-time { float: left; width: 18%; margin-top: 5px; text-align: right } .timeline .event-time>.date { display: block; font-size: 15px } .timeline .event-time>.time { display: block; font-size: 18px; font-weight: 400 } @media (min-width:992px) { .timeline .event-time { width: 46% } .timeline>li.on-left .event-time { float: right; text-align: left } } .timeline .event-icon { position: absolute; left: 24%; width: 50px; height: 50px; line-height: 37px; margin-left: -25px; background-color: #fff; border: 7px solid #fff; border-radius: 50%; text-align: center } .timeline .event-icon.event-icon-danger { background-color: #dd5826; border-color: #e27045 } .timeline .event-icon.event-icon-warning { background-color: #f0b518; border-color: #f2c03a } .timeline .event-icon.event-icon-success { background-color: #64bd63; border-color: #7dc87c } .timeline .event-icon.event-icon-info { background-color: #5dc4bf; border-color: #77cec9 } .timeline .event-icon.event-icon-primary { background-color: #5d8fc2; border-color: #77a1cc } .timeline .event-icon.event-icon-danger, .timeline .event-icon.event-icon-info, .timeline .event-icon.event-icon-primary, .timeline .event-icon.event-icon-success, .timeline .event-icon.event-icon-warning { color: #fff } @media (min-width:992px) { .timeline .event-icon { left: 50% } } .timeline .event-icon>img { width: 36px; height: 36px; margin-top: -4px } .event-heading { margin: 0 0 2px } .event-heading>a { text-decoration: none; color: #7ca9dd } .event-heading, .event-heading>small { font-weight: 600 } .event-heading>small>a { text-decoration: none; color: #999 } .event-map { height: 200px; margin: 0 -20px -20px; overflow: visible!important } .event-image { margin: 0 -20px -20px; max-height: 260px; overflow: hidden } .event-image>img { max-width: 100% } .post-links { margin-bottom: 0; font-size: 12px; padding-left: 0 } .post-links:after, .post-links:before { content: " "; display: table } .post-links:after { clear: both } .post-links>li { float: left; list-style: none } .post-links>li+li:before { color: #999; content: "\25cf"; padding: 0 8px } .post-links>li>a { text-decoration: none; color: #999 } .post-links>li>a:hover { color: #999 } .post-links.no-separator>li+li { margin-left: 12px } .post-links.no-separator>li+li:before { content: normal } .post-comments { font-size: 12px; padding-left: 0 } .post-comments:after, .post-comments:before { content: " "; display: table } .post-comments:after { clear: both } .post-links+.post-comments { margin-top: 10px } .post-comments>li { padding: 10px; border-top: 1px solid #e7e7e7; list-style: none } .post-comments>li:after, .post-comments>li:before { content: " "; display: table } .post-comments>li:after { clear: both } .post-comments>li:last-child { padding-bottom: 0 } .post-comments p:last-child { margin-bottom: 0 } .post-comments .avatar { margin-top: 1px } .post-comments .author { margin-top: 0; margin-bottom: 2px; color: #7ca9dd } .post-comments .comment-body { overflow: auto } .post-comments h6.author>small { font-size: 11px } .widget>footer .post-comments { margin-left: -20px; margin-right: -20px } .post-user { position: relative } .post-user:after, .post-user:before { content: " "; display: table } .post-user:after { clear: both } .post-user img { border: 3px solid #fff } .thumb img, .thumb-lg img, .thumb-sm img, .thumb-xlg img, .thumb-xs img { height: auto; max-width: 100%; vertical-align: middle; } .thumb-xlg { width: 100px; } .mr-sm { margin-right: 10px; } .thumb, .thumb-lg, .thumb-sm, .thumb-xlg, .thumb-xs { position: relative; display: inline-block; text-align: center; } .thumb-sm { width: 34px; } .thumb-xs { width: 28px; } .post-user-profile { margin-top: -75px; } .post-user-profile .contacts { display: block; margin-top: 25px; margin-left: -10px; margin-right: -10px; padding-left: 0; text-align: center; list-style:none; } .btn-toolbar { margin-top: 10px; margin-bottom: 10px; }
Dey-Dey

profile with timeline activities

Dey-Dey
  Apr 27th, 00:14
73 Views