<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"> <!-- Page header --> <div class="page-header"> <h2>Timeline <small>using Bootstrap's <code>.panel</code>.</small></h2> </div> <!-- /Page header --> <!-- Timeline --> <div class="timeline"> <!-- Line component --> <div class="line text-muted"></div> <!-- Separator --> <div class="separator"> <h3><location>Santa Monica</location> <small><time>26. 3. 2015</time></small> </h3> </div> <!-- /Separator --> <article class="panel panel-primary"> <!-- Icon --> <div class="panel-heading icon"> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <div class=""> <img class="img-responsive" src="//placehold.it/237x236" /> <img class="img-responsive" src="//placehold.it/237x236" /> </div> <div class="top-7"> <img class="img-responsive" src="//placehold.it/157x157" /> <img class="img-responsive" src="//placehold.it/157x157" /> <img class="img-responsive" src="//placehold.it/157x157" /> </div> </div> <!-- /Body --> <!-- Footer --> <div class="panel-footer"> <button class="btn btn-xs btn-primary">Share</button> </div> <!-- /Footer --> </article> <!-- Panel --> <article class="panel panel-danger panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-heart"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <strong>Someone</strong> favourited your photo. </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-default panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-picture"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> <img class="img-responsive img-rounded" src="//placehold.it/350x150" /> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-primary"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-plus"></i> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading"> <h2 class="panel-title">New content added</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> Some new content has been added. </div> <!-- /Body --> <!-- Footer --> <div class="panel-footer"> <small>Footer is also supported!</small> </div> <!-- /Footer --> </article> <!-- /Panel --> <!-- Separator --> <div class="separator text-muted"> <time>25. 3. 2015</time> </div> <!-- /Separator --> <!-- Panel --> <article class="panel panel-success"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-plus"></i> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading"> <h2 class="panel-title">New content added</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> Anything you can do with <code>.panel</code>, can be done in timeline too! </div> <!-- /Body --> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Like</li> <li class="list-group-item">list</li> <li class="list-group-item">groups</li> <li class="list-group-item">and</li> <li class="list-group-item">tables</li> </ul> </article> <!-- /Panel --> <!-- Panel --> <article class="panel panel-info panel-outline"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <!-- /Icon --> <!-- Body --> <div class="panel-body"> That is all. </div> <!-- /Body --> </article> <!-- /Panel --> </div> <!-- /Timeline --> </div> </div>

.timeline { position: relative; padding: 21px 0px 10px; margin-top: 4px; margin-bottom: 30px; } .timeline .line { position: absolute; width: 4px; display: block; background: currentColor; top: 0px; bottom: 0px; margin-left: 30px; } .timeline .separator { border-top: 1px solid currentColor; padding: 5px; padding-left: 40px; font-style: italic; font-size: .9em; margin-left: 30px; } .timeline .line::before { top: -4px; } .timeline .line::after { bottom: -4px; } .timeline .line::before, .timeline .line::after { content: ''; position: absolute; left: -4px; width: 12px; height: 12px; display: block; border-radius: 50%; background: currentColor; } .timeline .panel { position: relative; margin: 10px 20% 21px 70px; clear: both; } .timeline .panel::before { position: absolute; display: block; top: 8px; left: -24px; content: ''; width: 0px; height: 0px; border: inherit; border-width: 12px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .timeline .panel .panel-heading.icon * { font-size: 14px; vertical-align: middle; line-height: 20px; } .timeline .panel .panel-heading.icon { position: absolute; top: 10px; left: -49px; display: block; width: 20px; height: 20px; padding: 0px; border-radius: 50%; text-align: center; float: left; } .timeline .panel-outline { border-color: transparent; background: transparent; box-shadow: none; } .timeline .panel-outline .panel-body { padding: 10px 0px; } .timeline .panel-body { padding: 5px; } .timeline .panel-outline .panel-heading:not(.icon), .timeline .panel-outline .panel-footer { display: none; } .top-5 { margin-top:5px; } .top-7 { margin-top:7px; } .top-10 { margin-top:10px; } .top-15 { margin-top:15px; } .top-17 { margin-top:17px; } .top-30 { margin-top:30px; } .img-responsive { display: inline-block; }