"timeline"
Bootstrap 3.3.0 Snippet by haoHu

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h2 class="text-center"> Responsive facebook style timeline design - wsnippets.com</h2> <ul class="timeline"> <li> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-time invert" title="Now" id=""></i></a></div> <div class="timeline-panel"> <form action="update.php" method="post" role="form" enctype="multipart/form-data" class="facebook-share-box"> <div class="timeline-body"> <div class="share-form"> <ul class="post-types"> <li class="post-type"> <a class="status" id="shareType" href="#"><i class="icon icon-file"></i> Status</a> </li> <li class="post-type"> <a class="photos" id="shareType" href="#"><i class="icon icon-camera"></i> Photos</a> </li> <li class="post-type"> <a class="videos" id="shareType" href="#"><i class="icon icon-film"></i> Video</a> </li> </ul> <div class="share"> <div class="arrow"></div> <div><textarea name="message" cols="40" rows="10" id="status_message" class="form-control message" style="height: 62px; overflow: hidden;" placeholder="What's on your mind ?"></textarea> </div> <div class="image hide"> <input type="file" class="form-control" name="image" id="image"> </div> <div class="video hide"> <input type="text" class="form-control" placeholder="Youtube or Vimeo video URL" id="videoUrl" name="videoUrl"> </div> </div> </div> </div> <div class="timeline-footer clearfix"> <div class="pull-right"> <input type="submit" name="submit" value="Post" id="btn-share" class="btn btn-primary"> </div> </div> </form> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge primary" ><a title="11 hours ago via Twitter"><i class="glyphicon glyphicon-time invert" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-header"> <div class="row"> <div class="col-xs-2"> <img class="img-responsive img-rounded" src="http://0.gravatar.com/avatar/43a5669f2e4d2342701ed560d453a0dd?s=50&d=&r=G"> </div> <div class="col-xs-8"> <a>Azhagupandian </a> shared 6 hours ago </div> </div> </div> <div class="timeline-heading"> <div class="videowrapper"> <iframe height="300" src="http://www.youtube.com/embed/IuLG6WqjOEo" frameborder="0" allowfullscreen=""></iframe> </div> </div> <div class="timeline-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="timeline-footer"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://0.gravatar.com/avatar/43a5669f2e4d2342701ed560d453a0dd?s=50&d=&r=G" /> </a> <div class="media-body"> <p>Looking cool</p> <a href="#">January 19 at 8:15pm</a> </div> </div> <hr> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://0.gravatar.com/avatar/43a5669f2e4d2342701ed560d453a0dd?s=50&d=&r=G" /> </a> <div class="media-body">Looking cool </div> </div> <hr> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://0.gravatar.com/avatar/43a5669f2e4d2342701ed560d453a0dd?s=50&d=&r=G" /> </a> <div class="media-body">Looking cool </div> </div> </div> </div> </li> <li> <div class="timeline-badge primary" ><a title="11 hours ago via Twitter"><i class="glyphicon glyphicon-time invert" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-header"> <div class="row"> <div class="col-xs-2"> <img class="img-responsive img-rounded" src="http://0.gravatar.com/avatar/43a5669f2e4d2342701ed560d453a0dd?s=50&d=&r=G"> </div> <div class="col-xs-8"> <a>Azhagupandian </a> shared 6 hours ago </div> </div> </div> <div class="timeline-heading"> <img class="img-responsive" src="img/img-430-135.png" /> <div class="timeline-images"> <div class="row"> <div class="col-xs-4"> <img src="img/img-200.png" class="img-thumbnail img-responsive" /> </div> <div class="col-xs-4"> <img src="img/img1-200.png" class="img-thumbnail img-responsive" /> </div> <div class="col-xs-4"> <img src="img/img-200.png" class="img-thumbnail img-responsive" /> </div> </div> </div> </div> <div class="timeline-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> </li> </ul> </div> </div> </div>
body { padding-top: 40px; padding-bottom: 40px; background: #fdfdfd; } .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .profile-cover { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: 46%; float: left; border: 1px solid #d4d4d4; /*border-radius: 2px;*/ /*padding: 20px;*/ position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 24px; height: 24px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -12px; /*background-color: #999999;*/ z-index: 100; /* border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; */ } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge > a { color: #C5C7C5 !important; } .timeline-badge a:hover { color: #FF531F !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { padding:20px; margin-bottom: 0; background: #fff; } .timeline-body > p + p { margin-top: 5px; } .timeline-footer{ padding:20px; background-color:#f4f4f4; } .timeline-header{ padding:20px; background-color:#f4f4f4; } .timeline-footer > a{ cursor: pointer; text-decoration: none; } .timeline-heading{ background: #fff; } .facebook-share-box { width: 100%; } .facebook-share-box .share-form{ padding: 2%; } .facebook-share-box .share { -webkit-transition: 0.1s ease-out height; -moz-transition: 0.1s ease-out height; -ms-transition: 0.1s ease-out height; -o-transition: 0.1s ease-out height; transition: 0.1s ease-out height; clear: both; background: white; border: 2px solid #dddddd; margin-bottom: 10px; position: relative; } .facebook-share-box .share .arrow { background: url(../img/arrow.png) no-repeat #dddddd; position: absolute; width: 14px; height: 10px; left: 4px; display: inline; top: -10px; -webkit-transition: 0.3s ease-out all; -moz-transition: 0.3s ease-out all; -ms-transition: 0.3s ease-out all; -o-transition: 0.3s ease-out all; transition: 0.3s ease-out all; } .facebook-share-box .post-types li a { color: #085083; text-decoration: none; } .facebook-share-box .post-types li a.active { color: #404040; } .facebook-share-box .post-types { padding-left: 5px; } .facebook-share-box ul { list-style: none; margin-bottom: 9px; } .facebook-share-box .post-types li { display: inline; margin-right: 10px; } .message { border-radius: 0; border: none; } .panel { border-radius: 0; border: none; margin-bottom: 0; } .timeline-images{ margin: 2px; } .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 28px; margin-left: 0; top: 20px } ul.timeline > li > .timeline-panel { float: right; margin-right: 2%; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } }
$(document).ready(function(){ $('.status').click(function() { $('.arrow').css("left", 0);}); $('.photos').click(function() { $('.arrow').css("left", 80);}); $('.videos').click(function() { $('.arrow').css("left", 160);}); });

Related: See More


Questions / Comments: