"Boostrap Time Line"
Bootstrap 3.3.0 Snippet by juanssjj

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="widget no-padding blank"> <div class="timeline-sec"> <ul> <li> <div class="timeline"> <div class="user-timeline"> <span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span> </div> <div class="timeline-detail"> <div class="timeline-head"> <h3>Mohsin Irshad<span><i class="fa fa-clock-o"></i> 2 min ago</span><i class="red">Admin</i></h3> </div> <div class="timeline-content"> <p>Set it as the font <a href="#" title="">John Doe</a> in your applition, and copy and paste the icons. Print this page.</p> <div class="progress w-tooltip"> <div style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="purple progress-bar"> <span><i>uploading</i>70%</span> </div> </div> <div data-toggle="buttons" class="btn-group btn-group-sm"> <label class="btn btn-default"> <input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply </label> <label class="btn btn-default"> <input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like </label> </div> <form class="post-reply ng-pristine ng-valid"> <textarea placeholder="Write your comment"></textarea> <i class="fa fa-comments"></i> </form> </div> </div> </div> </li> <li> <div class="timeline"> <div class="user-timeline"> <span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span> </div> <div class="timeline-detail"> <div class="timeline-head"> <h3>Haseeb Iftikhar<span><i class="fa fa-clock-o"></i> 2 hours ago</span><i class="purple">Mod</i></h3> <div class="social-share"> <a title=""><i class="ti-sharethis"></i></a> <ul class="social-btns"> <li><a title="Facebook" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-facebook"></i></a></li> <li><a title="Google" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-google"></i></a></li> <li><a title="Twitter" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-twitter"></i></a></li> </ul> </div> </div> <div class="timeline-content"> <p>at <a href="#" title="">Khana Zidi</a> Jonathan DOe Uploaded 4 new photos.</p> <div class="timeline-gallery"> <ul> <li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></a></li> <li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://images.starpulse.com/pictures/2013/08/08/previews/Matt%20Damon-MTO-009587.jpg" alt=""></a></li> <li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://images.boomsbeat.com/data/images/full/32034/422817_original-jpg.jpg" alt=""></a></li> <li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://img2.timeinc.net/people/i/2006/celebdatabase/denzelwashington/denzel_washington1_300_400.jpg" alt=""></a></li> </ul> </div> <div data-toggle="buttons" class="btn-group btn-group-sm"> <label class="btn btn-default"> <input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply </label> <label class="btn btn-default"> <input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like </label> </div> <form class="post-reply ng-pristine ng-valid"> <textarea placeholder="Write your comment"></textarea> <i class="fa fa-comments"></i> </form> </div> </div> </div> </li> <li> <div class="timeline"> <div class="user-timeline"> <span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span> </div> <div class="timeline-detail"> <div class="timeline-head"> <h3>Hussain Zaidi<span><i class="fa fa-clock-o"></i> 4 min ago</span><i class="green">User</i></h3> <div class="social-share"> <a title=""><i class="ti-sharethis"></i></a> <ul class="social-btns"> <li><a title="Facebook" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-facebook"></i></a></li> <li><a title="Google" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-google"></i></a></li> <li><a title="Twitter" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-twitter"></i></a></li> </ul> </div> </div> <div class="timeline-content"> <p>Set it as the font <a href="#" title="">John Doe</a> in your applition, and copy and paste the icons. Print this page to PDF for te completet of vectors. Or to use othe the Font Aweo Awesome</p> <div data-toggle="buttons" class="btn-group btn-group-sm"> <label class="btn btn-default"> <input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply </label> <label class="btn btn-default"> <input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like </label> </div> <form class="post-reply ng-pristine ng-valid"> <textarea placeholder="Write your comment"></textarea> <i class="fa fa-comments"></i> </form> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div>
body { background: none repeat scroll 0 0 #e6e9ee; margin: 0; overflow-x: hidden; padding: 0; } body .no-padding { padding: 0; } .widget { float: left; margin-top: 30px; padding: 25px 30px; width: 100%; } .timeline-sec { float: left; width: 100%; } .timeline-sec > ul { float: left; list-style: none outside none; margin: 0; padding: 0; position: relative; width: 100%; } .timeline-sec > ul:before { background: none repeat scroll 0 0 #fafafa; content: ""; height: 100%; left: 22px; position: absolute; top: 0; width: 2px; } .timeline-sec > ul > li { float: left; margin-bottom: 30px; position: relative; width: 100%; } .timeline { float: left; padding-left: 70px; position: relative; width: 100%; } .user-timeline { left: 0; position: absolute; top: 0; width: 70px; } .user-timeline > span { float: left; position: relative; width: 100%; } .user-timeline > span > img { border: 3px solid #f5f5f5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; height: 45px; overflow: hidden; width: 45px; } .timeline-detail { background: none repeat scroll 0 0 #f5f5f5; float: left; position: relative; width: 100%; } .timeline-detail:before { border-bottom: 8px solid transparent; border-right: 8px solid #fafafa; border-top: 8px solid transparent; content: ""; left: -7px; position: absolute; top: 12px; } .timeline-head { background: none repeat scroll 0 0 #fafafa; float: left; width: 100%; } .timeline-head > h3 { color: #333333; float: left; font-family: Roboto; font-size: 14px; font-weight: normal; letter-spacing: 0.3px; line-height: 22px; margin: 0; padding: 9px 0 9px 20px; } .timeline-head > h3 > span { color: #999999; font-size: 11px; letter-spacing: 0.3px; margin-left: 20px; margin-right: 12px; } .timeline-head > h3 > i { font-family: Lato; font-size: 11px; font-style: normal; letter-spacing: 0.3px; padding: 2px 6px; } .red, .support-ticket .removed, .edit-remove > li > .remove, .friend-list li > span.offline:before { background: -moz-linear-gradient(top, #ff5959 0%, #ff3b3b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b3b), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ff5959 0%,#ff3b3b 100%); background: -o-linear-gradient(top, #ff5959 0%,#ff3b3b 100%); background: -ms-linear-gradient(top, #ff5959 0%,#ff3b3b 100%); background: linear-gradient(to bottom, #ff5959 0%,#ff3b3b 100%); color: #fff; } .social-share { float: right; padding: 8px; position: relative; } .social-share > a { background: none repeat scroll 0 0 #fff; color: #777777; cursor: pointer; float: right; height: 25px; line-height: 25px; text-align: center; width: 25px; position: relative; } .social-btns { float: right; list-style: outside none none; margin: -35px 0 0; padding: 0; } .social-share > .social-btns { margin: 0; opacity: 0; position: absolute; top: 100%; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); width: 25px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .social-share > .social-btns > li { float: left; margin: 0 0 2px; width: 100%; } .social-btns > li { float: right; list-style: outside none none; margin-left: 6px; } .social-btns > li > a { float: left; } .social-share > .social-btns > li > a > i { font-size: 13px; height: 25px; line-height: 25px; width: 25px; } .social-btns > li > a > i.ti-facebook { background: none repeat scroll 0 0 #3b5998; } .social-btns > li > a > i { color: #fff; float: left; font-size: 16px; height: 31px; line-height: 31px; text-align: center; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 31px; } .timeline-content { float: left; padding: 15px 20px; width: 100%; } .post-reply > textarea { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: medium none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #888888; float: left; font-family: Roboto; font-size: 13px; height: 36px; letter-spacing: 0.3px; padding: 7px 45px 7px 19px; resize: vertical; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 100%; } .progress.w-tooltip > .progress-bar { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; position: relative; } .purple, .menu ul li:hover > a, .support-ticket .new, .toggle-switch span:before, .actionBar > a.buttonFinish, .error-sec ul > li:before { background: -moz-linear-gradient(top, #8a7aff 0%, #715eff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#715eff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #8a7aff 0%,#715eff 100%); background: -o-linear-gradient(top, #8a7aff 0%,#715eff 100%); background: -ms-linear-gradient(top, #8a7aff 0%,#715eff 100%); background: linear-gradient(to bottom, #8a7aff 0%,#715eff 100%); color: #fff; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; box-shadow: none; -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .timeline-gallery { float: left; margin-top: 15px; width: 100%; } .timeline-gallery > ul { float: left; list-style: none outside none; margin: -10px 0 0; padding: 0; width: 100%; } .timeline-gallery > ul > li { float: left; margin-right: 10px; margin-top: 10px; } .timeline-gallery > ul > li > a { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; overflow: hidden; position: relative; width: 100%; } .timeline-gallery > ul > li > a:before { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; content: ""; height: 90%; left: 5%; opacity: 0; position: absolute; top: 5%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 90%; } .timeline-gallery > ul > li > a i { color: #fff; left: 0; margin-top: -5px; opacity: 0; position: absolute; text-align: center; top: 50%; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 100%; z-index: 9; } .timeline-gallery > ul > li > a > img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; width: 70px; height:70px; } .post-reply { background: none repeat scroll 0 0 #ffffff; float: left; margin-top: 11px; position: relative; width: 100%; } .timeline-content > .btn-group { float: left; margin-top: 15px; width: 100%; } .green, .support-ticket .done, .edit-remove > li > .edit, .toggle-switch *:checked + span:before, .friend-list li > span.online:before { background: -moz-linear-gradient(top, #0fce33 0%, #07bf29 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#07bf29), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #0fce33 0%,#07bf29 100%); background: -o-linear-gradient(top, #0fce33 0%,#07bf29 100%); background: -ms-linear-gradient(top, #0fce33 0%,#07bf29 100%); background: linear-gradient(to bottom, #0fce33 0%,#07bf29 100%); color: #fff; } .timeline-content > .btn-group > label { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; font-family: Roboto; font-size: 11px; letter-spacing: 0.3px; padding: 2px 8px; } .post-reply > i { color: #999999; font-size: 14px; margin-top: -7px; position: absolute; right: 13px; top: 50%; } .timeline-gallery > ul > li > a:hover:before { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .timeline-gallery > ul > li > a:before { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; content: ""; height: 90%; left: 5%; opacity: 0; position: absolute; top: 5%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 90%; }

Related: See More


Questions / Comments: