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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 class="small-top">
<div class="container">
<div class="row">
<div class="col-lg-4 date-sec hidden-sm-down">
<div id="Date"></div>
</div>
<div class="col-lg-3 offset-lg-5">
<div class="social-icon"> <a target="_blank" href="#" class=" fa fa-facebook"></a> <a target="_blank" href="#" class=" fa fa-twitter"></a> <a target="_blank" href="#" class=" fa fa-google-plus"></a> <a target="_blank" href="#" class=" fa fa-linkedin"></a> <a target="_blank" href="#" class=" fa fa-youtube"></a> <a target="_blank" href="#" class=" fa fa-vimeo-square"></a> </div>
</div>
</div>
</div>
</div>
<div class="top-head left">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<h1>Grafreez News<small>Get the latest News</small></h1>
</div>
<div class="col-md-6 col-lg-3 offset-lg-5 admin-bar hidden-sm-down">
<nav class="nav nav-inline"> <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-envelope-o"></i></a> <a href="#" class="nav-link"><i class="fa fa-bell-o"></i></a> <a href="#" class="nav-link">Bruce Wayne <img class="img-fluid rounded-circle" src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg"></a> </nav>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar top-nav">
<div class="container">
<button class="navbar-toggler hidden-lg-up " type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="exCollapsingNavbar2"> <a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav ">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">World</a> </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
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;}
.btn-search{background: #FD3A13; border-color: #FD3A13; color: #fff; padding: 7px 10px}
.btn-search:hover{background: #ca1b1b; border-color: #ca1b1b}
section{padding: 30px 0; float: left; width: 100%}
.card{float: left; width:100%}
.navbar {border: medium none; float: left; margin-bottom: 0px; width: 100%; border-radius: 0}
.title-large {font-size: 20px; margin: 10px 0 5px; line-height: 27px; color: #141517;}
.title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
.title-x-small {font-size: 18px; margin: 0px;}
.title-large a, .title-small a, .title-x-small a{color: inherit}
.banner-sec{float: left; width: 100%; background: #EBEBEB}
.card-block{padding:0 10px 10px;}
.card-text{margin: 0}
.text-time{color: #ff0000; font-weight: 600;}
.banner-sec .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}
header{float: left; width:100%}
.small-top{ border-bottom: 1px solid #2b2b2b;float: left; width: 100%; background: #000}
.small-top .social-icon{float: right;}
.small-top .social-icon a {border-left: 1px solid #2b2b2b; color: #ca1b1b; float: left; padding: 6px 13px;}
.small-top .social-icon a:last-child {border-right: 1px solid #2b2b2b;}
.small-top .social-icon a:hover {color:#FD3A13; text-decoration: none;}
.small-top .date-sec {font-size: 13px; font-weight: 600; float: left; margin-top: 4px; padding-left: 0; color: #898989}
.top-head{background: #141517; width: 100%; float: left; height: 100px;}
.top-head h1 {color: #fff; font-size: 36px; font-weight: 600; margin: 18px 0 0;}
.top-head small{float: left; width: 100%; font-size: 14px; color: #c0c0c0; margin-top: 5px; margin-left: 5px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: