"News Template - Bootsrap 4 #user-interface #slider #layouts #card user #lists"
Bootstrap 4.0.0 Snippet by bulbulica

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 id="container" class="mainContent"> <div id="wrapper"> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-12"> <h3 class="heading-large">Categorie 1</h3> <div class="flex-inline"> <div class="col-lg-6"> <div class="card"> <img class="img-fluid" src="img/53176117_1181311808717040_3849213685687910400_n.jpg_Categorie 1.jpg" alt=""> <div class="card-body"> <div class="news-title"> <a href="#"> <h2 class="title-small">Titlu</h2> </a> </div> <p class="card-text">1</p> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <img class="img-fluid" src="img/52390022_2083827301666137_9139699043067232256_n.jpg_Categorie 1.jpg" alt=""> <div class="card-body"> <div class="news-title"> <a href="#"> <h2 class="title-small">Anunt 2</h2> </a> </div> <p class="card-text">2</p> </div> </div> </div> </div> <br> <div class="flex-inline"> <div class="col-lg-6"> <div class="card"> <img class="img-fluid" src="img/62556720_2832171880143199_1116027400526757888_n.jpg_Categorie 1.jpg" alt=""> <div class="card-body"> <div class="news-title"> <a href="#"> <h2 class="title-small">Anunt 1</h2> </a> </div> <p class="card-text">3</p> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <img class="img-fluid" src="img/62556720_2832171880143199_1116027400526757888_n.jpg_Categorie 1.jpg" alt=""> <div class="card-body"> <div class="news-title"> <a href="#"> <h2 class="title-small">Anunt 1</h2> </a> </div> <p class="card-text">3</p> </div> </div> </div> </div> </div> <aside class="col-lg-4 side-bar col-md-12"> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Noutăți</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Cele mai vizualizate</a> </li> </ul> <!-- Tab panes --> <div class="tab-content sidebar-tabing" id="nav-tabContent"> <div class="tab-pane active" id="home" role="tabpanel"> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">Key Republicans sign letter warning against candidate</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">Obamacare Appears to Be Making People Healthier</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">Key Republicans sign letter warning against candidate</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> </div> <div class="tab-pane" id="profile" role="tabpanel"> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">Key Republicans sign letter warning against candidate</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">‘S.N.L.’ to Lose Two Longtime Cast Members</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> <div class="media"><a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a> <div class="media-body"> <div class="news-title"> <h2 class="title-small"><a href="#">Obamacare Appears to Be Making People Healthier</a></h2> </div> <div class="news-auther"><span class="time">1h ago</span></div> </div> </div> </div> </div> </aside> <div class="col-lg-8 col-md-12"> <h3 class="heading-large">Categorie 2</h3> <div class="flex-inline"> <div class="col-lg-6"> <div class="card"> <img class="img-fluid" src="img/52293313_409762219602408_2988070741385150464_n.jpg_Categorie 2.jpg" alt=""> <div class="card-body"> <div class="news-title"> <a href="#"> <h2 class="title-small">Anunt 1</h2> </a> </div> <p class="card-text">1</p> </div> </div> </div> </div> <br/> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
body { color: #5a5a5a; font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; } a, a:hover, .btn { outline: none !important; } section { padding: 30px 0; float: left; width: 100%; } .card { float: left; width: 100%; } .title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 2px 0 0; } .title-small a { color: inherit; } .card-text { margin: 0; } .side-bar .nav-tabs { border-bottom: none; } .side-bar .nav-tabs .nav-link { color: #aeaeae; text-transform: uppercase; border: none; } .side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover { border-bottom: 2px solid #ff0000; text-transform: uppercase; color: #222; } .sidebar-tabing .media { margin-top: 20px; } .sidebar-tabing img { width: 120px; height: 100px; } .sidebar-tabing .title-small { line-height: 23px; margin-top: 5px; font-size: 18px; } .section-01 { float: left; width: 100%; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; } .section-01 .heading-large { border-bottom: 2px solid #222; color: #222; float: left; width: 100%; padding: 0 0 6px; margin: 0 0 18px; text-align: left; } .section-01 .heading-large::before, .section-01 .heading-large::after { background: transparent; } .section-01 .heading-small { border-bottom: 2px solid #222; color: #222; float: left; margin: 7px 0 0; width: 100%; padding-bottom: 10px; font-size: 18px; } .section-01 .title-small { margin-bottom: 5px; font-size: 17px; } .section-01 .news-block { border: none; border-bottom: 1px dashed #000; padding-bottom: 30px; } .section-01 aside > .news-block { border-bottom: 1px dashed #000; padding-bottom: 19px; } .section-01 aside > .news-block:last-child { border-bottom: none; margin-bottom: 20px } .section-01 .card { border: none; } .section-01 .card-block { padding: 10px 0; } .section-01 .video-sec { float: left; margin-top: 30px; width: 100%; } .section-01 .video-block { float: left; margin-top: 20px; width: 100%; } .action-sec { width: 100%; float: left; background: #222; } .action-box { float: left; width: 100%; text-align: center; } .action-box h2 { color: #fff; font-size: 20px; } .flex-inline { display: flex; }
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); }); var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"] var newDate = new Date(); newDate.setDate(newDate.getDate() + 1); $('#Date').html(dayNames[newDate.getDay()] + ", " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

Related: See More


Questions / Comments: