<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="col-sm-4"> <div class="timeline"> <div class="line"></div> <article class="panel"> <a href="post.php"> <div class="articleThumb"> <img src="http://placehold.it/60x60/C82330/FAFAFA" alt="Related Articles" class="img-responsive block-center img-circle"> </div> <div class="panel-body"> <p class="line-clamp line-clamp-3">Donec hendrerit sapien vel accumsan vestibulum. Proin nisl sapien, porta sit amet erat sit amet, porta elementum quam.</p> </div> </a> </article> <article class="panel"> <a href="post.php"> <div class="articleThumb"> <img src="http://placehold.it/60x60/DF7711/FAFAFA" alt="Related Articles" class="img-responsive block-center img-circle"> </div> <div class="panel-body"> <p class="line-clamp line-clamp-3">Proin nisl sapien, porta sit amet erat sit amet, porta elementum quam.</p> </div> </a> </article> <article class="panel"> <a href="post.php"> <div class="articleThumb"> <img src="http://placehold.it/60x60/407FBD/FAFAFA" alt="Related Articles" class="img-responsive block-center img-circle"> </div> <div class="panel-body"> <p class="line-clamp line-clamp-3">Proin nisl sapien, porta sit amet erat sit amet, porta elementum quam. Donec hendrerit sapien vel accumsan vestibulum. Proin nisl sapien, porta sit amet erat sit amet, porta elementum quam.</p> </div> </a> </article> <article class="panel"> <a href="post.php"> <div class="articleThumb"> <img src="http://placehold.it/60x60/62B32A/FAFAFA" alt="Related Articles" class="img-responsive block-center img-circle"> </div> <div class="panel-body"> <p class="line-clamp line-clamp-3">Proin nisl sapien, porta sit amet erat sit amet, porta elementum quam.</p> </div> </a> </article> <article class="panel"> <a href="post.php"> <div class="articleThumb"> <img src="http://placehold.it/60x60/D5DA1C/FAFAFA" alt="Related Articles" class="img-responsive block-center img-circle"> </div> <div class="panel-body"> <p class="line-clamp line-clamp-3">Donec hendrerit sapien vel accumsan vestibulum.</p> </div> </a> </article> </div> </div> </div> </div>

/*RELATED ARTICLES*/ .timeline { position: relative; padding: 21px 0px 10px; margin-top: 4px; margin-bottom: 30px; } .timeline .line { position: absolute; width: 2px; display: block; background: currentColor; top: 40px; bottom: 65px; margin-left: 32px; color: #5D5D5D; } .timeline a { color: #5D5D5D; text-decoration: none; } .timeline a:hover { color: #1F69B2; } .timeline a:hover .articleThumb img { -webkit-box-shadow: 1px 1px 3px #666; -moz-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666; -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; -transition: .5s; outline: 0 !important; } .timeline p { line-height: 17px; font-weight: 500; margin-bottom: 0; } .timeline .panel { position: relative; margin: 0 0px 25px 65px; clear: both; background-color: transparent; box-shadow: none; } .timeline .panel .articleThumb img { position: absolute; left: -64px; width: 60px; height: 60px; outline: 2px solid #FFF !important; } .timeline .panel-body { padding: 5px 15px; }