"Simple Upcoming Classes"
Bootstrap 4.1.1 Snippet by briankolins

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <h4>Upcoming Classes</h4> <ul class="timeline"> <li> <a target="_blank" href="https://www.tsg.mx/SIECram">SIE 2-Day Cram Course</a> <a href="#" class="float-right">February 23&24, 12p-8p Eastern</a> <p>All the material needed for the SIE, jam packed into 2, 8-hour days over a weekend. Included are all replays, additional written posts, pictures/charts/graphics, and a video animation library of additional content to help make the material understandable.</p> <p>Information and registration at <a href="http://www.TSG.mx/SIECram">www.TSG.mx/SIECram</a></p> </li> <li> <a target="_blank" href="https://www.tsg.mx/SIEStudy">SIE 6-Class Study Course</a> <a href="#" class="float-right">Starts February 20th, 7p-10p Eastern</a> <p>All the material needed for the SIE, spread out over 6 weeks to allow processing and understanding. Included are all replays, additional written posts, pictures/charts/graphics, and a video animation library of additional content to help make the material understandable.</p> <p>Dates for the class: 2/20, 2/27, 3/6, 3/13, 3/20, and 3/27</p> <p>Information and registration at <a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIEStudy</a></p> </li> </ul> </div> </div> </div> <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div>
ul.timeline { list-style-type: none; position: relative; } ul.timeline:before { content: ' '; background: #d4d9df; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400; } ul.timeline > li { margin: 20px 0; padding-left: 20px; } ul.timeline > li:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #22c0e8; left: 20px; width: 20px; height: 20px; z-index: 400; }

Related: See More


Questions / Comments: