<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="page-header">
<h1 id="timeline">Timeline</h1>
</div>
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<form role="form">
<div class="timeline-heading">
<div class="form-group">
<label for="title">title</label>
<input type="text" class="form-control" placeholder="Title">
</div>
</div>
<div class="timeline-body">
<div class="form-group">
<label for="Text">text</label>
<textarea class="form-control" placeholder="text" rows="3"></textarea>
</div>
</div>
<div class="ploc-tags">
<div class="pull-right">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-xs active">
<input type="checkbox" checked> alice
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-xs">
<input type="checkbox"> story
</label>
