<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <h2>Time Line</h2> </div> <div class="message-item" id="m16"> <div class="message-inner alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="btn btn-xs btn-success pull-right">Clear imported data</a> <strong>Success:</strong> you should do an action. </div> </div> <div class="message-item" id="m17"> <div class="alert alert-warning message-inner"> <div class="qa-message-content"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="btn btn-xs btn-warning pull-right">do something</a> <strong>Warning:</strong> you should do an action. </div> </div> </div> <div class="message-item" id="m18"> <div class="alert alert-danger message-inner"> <div class="qa-message-content"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="btn btn-xs btn-danger pull-right">do something</a> <strong>Danger:</strong> you should do an action. </div> </div> </div> <div class="message-item" id="m19"> <div class="alert alert-info message-inner"> <div class="qa-message-content"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="btn btn-xs btn-info pull-right">do something</a> <strong>Info:</strong> you should do an action. </div> </div> </div> <div class="message-item" id="m20"> <div class="alert alert-default message-inner"> <div class="qa-message-content"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="btn btn-xs btn-primary pull-right">do something</a> <strong>Default:</strong> you should do an action. </div> </div> </div> </div>

/* --------------------------------- Message item --------------------------------- */ /* General */ .message-item { margin-bottom: 25px; margin-left: 40px; position: relative; } /* ----------------------- Custom ----------------------- */ /* Success */ .message-item .alert-success { border-color: #5cb85c; } /* Info */ .message-item .alert-info { border-color: #5bc0de; } /* Warning */ .message-item .alert-warning { border-color: #f0ad4e; } /* Danger */ .message-item .alert-danger { border-color: #d9534f; } /* Default */ .message-item .alert-default { border-color: #337ab7; } /* --------------------------------- Message interior --------------------------------- */ .message-item .message-inner { border-width: 1px; border-style: solid; border-radius: 3px; padding: 10px; position: relative; } /* --------------------------------- Direction pointers --------------------------------- */ /* General */ .message-item .message-inner:before { border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -20px; top: 6px; width: 0; } .message-item .message-inner:after { border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -18px; top: 6px; width: 0; } /* ----------------------- Custom ----------------------- */ /* Success */ .message-item .message-inner.alert-success:before { border-right: 10px solid #5cb85c; } .message-item .message-inner.alert-success:after { border-right: 10px solid #DFF0D8; } /* Info */ .message-item .message-inner.alert-info:before { border-right: 10px solid #5bc0de; } .message-item .message-inner.alert-info:after { border-right: 10px solid #D9EDF7; } /* Warning */ .message-item .message-inner.alert-warning:before { border-right: 10px solid #f0ad4e; } .message-item .message-inner.alert-warning:after { border-right: 10px solid #FCF8E3; } /* Danger */ .message-item .message-inner.alert-danger:before { border-right: 10px solid #d9534f; } .message-item .message-inner.alert-danger:after { border-right: 10px solid #F2DEDE; } /* Default */ .message-item .message-inner.alert-default:before { border-right: 10px solid #337ab7; } .message-item .message-inner.alert-default:after { border-right: 10px solid #fff; }