"Timeline"
Bootstrap 3.0.3 Snippet by madflojo

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="page-header"> <h1 id="timeline">Timeline</h1> </div> <ul class="timeline"> <li> <div class="timeline-badge danger"><i class="fa fa-fire"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">A problem occurs within your infrastructure</h4> <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 30 seconds ago</small></p> </div> <div class="timeline-body"> <p>Even if your monitoring can detect an issue within minutes and you have 24/7 staff with eyes on glass watching your environment. The average time to resolve an issue can be anywhere between 10 - 25 minutes, in the best case scenario.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge warning"><i class="fa fa-eye"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Runbook Monitors</h4> <p><small class="text-muted"><i class="fa fa-clock-o"></i> 25 seconds ago</small></p> </div> <div class="timeline-body"> <p>The first step in our Runbooks are monitors. Our monitors can watch over your infrastructure, applications and integrate with other monitoring solutions or service providers. You can run these as frequently as every 5 seconds to quickly detect issues.</p> </div> </div> </li> <li> <div class="timeline-badge info"><i class="fa fa-flask"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Runbook Reactions</h4> <p><small class="text-muted"><i class="fa fa-clock-o"></i> 20 seconds ago</small></p> </div> <div class="timeline-body"> <p>Whether it's performing DNS failover, restarting an AWS instance or executing BASH scripts we have over 40 Runbook reactions which can automatically resolve or reduce the impact of DevOps issues.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge success"><i class="fa fa-rocket"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Crisis Averted</h4> <p><small class="text-muted"><i class="fa fa-clock-o"></i> 20 seconds ago</small></p> </div> <div class="timeline-body"> <p>After our Runbook Monitors detect an issue and our Reactions resolve the issue your systems are back to business as usual. Why stop at automating builds and deployments, start automation issue resolution!</p> <hr> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </li> </ul> </div>
.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; } .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: 50%; 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-inverted + li:not(.timeline-inverted), .timeline > li:not(.timeline-inverted) + li.timeline-inverted { margin-top: -60px; } .timeline > li:not(.timeline-inverted) { padding-right:90px; } .timeline > li.timeline-inverted { padding-left:90px; } .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: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; 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.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; }

Related: See More


Questions / Comments: