"Kiilo New Timeline Format"
Bootstrap 3.0.0 Snippet by jenellej

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>Transaction <small>Type: Delivery <code>HKG to MNL (09/28/2017 9:00AM to 09/28/2017 11:00AM)</code></small></h2> </div> <!-- /Page header --> <!-- Timeline --> <div class="timeline"> <!-- Line component --> <div class="line text-muted"></div> <!-- Separator --> <div class="separator text-muted"> <time>September 22, 2017</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">Reservation Request</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <code>Sender1234</code> reserved a slot </div> <!-- /Body --> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Weight: 3kg</li> <li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li> <li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li> <li class="list-group-item">Insured: Yes</li> <li class="list-group-item">Declared Value: 100 USD</li> <li class="list-group-item"><button type="button" class="btn btn-success">Accept</button><button type="button" class="btn btn-danger">Reject</button></li> </ul> </article> <!-- 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">Communication</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body-chat"> <ul class="chat"> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Traveler4567</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small> <strong class="pull-right primary-font">Sender1234</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Traveler4567</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>14 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small> <strong class="pull-right primary-font">Sender1234</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> <!-- /Body --> <!-- Footer --> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." /> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat"> Send</button> </span> </div> </div> <!-- /Footer --> </article> <!-- /Panel --> <!-- Separator --> <div class="separator text-muted"> <time>September 23, 2017</time> </div> <!-- /Separator --> <article class="panel panel-warning"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-plus"></i> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading"> <h2 class="panel-title">Sender to Traveler Confirmation</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <code>Sender1234</code> sent the package </div> <!-- /Body --> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Weight: 3kg</li> <li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li> <li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li> <li class="list-group-item"><label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea><button type="button" class="btn btn-success">Confirm Package Received by Traveler</button></li> </ul> </article> <!-- Separator --> <div class="separator text-muted"> <time>September 28, 2017</time> </div> <!-- /Separator --> <!-- 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"> Flight: <code>HKG to MNL (09/28/2017 9:00AM to 09/28/2017 11:00AM)</code> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Separator --> <div class="separator text-muted"> <time>September 28, 2017</time> </div> <!-- /Separator --> <article class="panel panel-warning"> <!-- Icon --> <div class="panel-heading icon"> <i class="glyphicon glyphicon-plus"></i> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading"> <h2 class="panel-title">Traveler to Recipient Confirmation</h2> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <code>Traveler4567</code> has delivered the package </div> <!-- /Body --> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Weight: 3kg</li> <li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li> <li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li> <li class="list-group-item"><label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea><button type="button" class="btn btn-success">Confirm Package Received by Recipient</button></li> </ul> </article> <!-- 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"> Payout to Traveler Confirmed! Profit! :) </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 0px 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: 20px; vertical-align: middle; line-height: 40px; } .timeline .panel .panel-heading.icon { position: absolute; left: -59px; display: block; width: 40px; height: 40px; 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-outline .panel-heading:not(.icon), .timeline .panel-outline .panel-footer { display: none; } .chat { list-style: none; margin: 0; padding: 0; } .chat li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; } .chat li.left .chat-body { margin-left: 60px; } .chat li.right .chat-body { margin-right: 60px; } .chat li .chat-body p { margin: 0; color: #777777; } .panel .slidedown .glyphicon, .chat .glyphicon { margin-right: 5px; } .panel-body-chat { overflow-y: scroll; height: 250px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }

Related: See More


Questions / Comments: