"News Feed"
Bootstrap 4.1.1 Snippet by dipakextra

<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"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 sidebar-page-container"> <div class="sidebar"> <div class="sidebar-widget sidebar-post"> <div class="widget-title"> <h3>News Feed</h3> </div> <div class="post-inner"> <div class="carousel-inner-data"> <ul> <li> <div class="post"> <div class="post-date"><p>06</p><span>july</span></div> <div class="file-box"><i class="far fa-folder-open"></i><p>Subject</p></div> <h5><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h5> </div> </li> <li> <div class="post"> <div class="post-date"><p>25</p><span>April</span></div> <div class="file-box"><i class="far fa-folder-open"></i><p>Subject</p></div> <h5><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h5> </div> </li> <li> <div class="post"> <div class="post-date"><p>05</p><span>Jan</span></div> <div class="file-box"><i class="far fa-folder-open"></i><p>Subject</p></div> <h5><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h5> </div> </li> <li> <div class="post"> <div class="post-date"><p>06</p><span>July</span></div> <div class="file-box"><i class="far fa-folder-open"></i><p>Subject</p></div> <h5><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h5> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
.sidebar-page-container .sidebar .sidebar-post .post-inner .post{ position: relative; padding: 0px 0px 0px 75px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #e5e5e5; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post:last-child{ border-bottom: none; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .post-date{ position: absolute; left: 0px; top: 4px; width: 54px; height: 54px; text-align: center; border-radius: 5px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .post-date{ background: rgb(2,0,36); background: -moz-linear-gradient(rgba(0,123,255,1) 100%); background: -webkit-linear-gradient(rgba(0,123,255,1) 100%); background: linear-gradient(rgba(0,123,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#007bff",GradientType=1); } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .post-date p{ display: block; font-size: 18px; font-weight: 500; color: #fff; text-align: center; margin:0px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .post-date span{ position: relative; display: block; font-size: 13px; line-height: 18px; text-transform: uppercase; color: #fff; margin:0px; padding:0px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .file-box{ position: relative; margin-bottom: 9px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .file-box i{ position: relative; display: inline-block; font-size: 14px; color: #666666 !important; margin-right: 10px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post .file-box p{ position: relative; display: inline-block; margin-bottom:0px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post h5{ position: relative; display: block; font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 0px; color: #1d165c; margin:0px; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post h5 a{ display: inline-block; color: #1d165c; } .sidebar-page-container .sidebar .sidebar-post .post-inner .post h5 a:hover{ color: #e61819; } .carousel-inner-data{ margin:0px auto; height:350px; overflow:hidden; } .carousel-inner-data ul{ list-style:none; position:relative; } .carousel-inner-data li{ height:auto; }
$(function(){ var tickerLength = $('.carousel-inner-data ul li').length; var tickerHeight = $('.carousel-inner-data ul li').outerHeight(); $('.carousel-inner-data ul li:last-child').prependTo('.carousel-inner-data ul'); $('.carousel-inner-data ul').css('marginTop',-tickerHeight); function moveTop(){ $('.carousel-inner-data ul').animate({ top : -tickerHeight },600, function(){ $('.carousel-inner-data ul li:first-child').appendTo('.carousel-inner-data ul'); $('.carousel-inner-data ul').css('top',''); }); } setInterval( function(){ moveTop(); }, 3000); });

Related: See More


Questions / Comments: