NiceSnippets.com
Bootstrap 4 News Box Grid Example
In this post we are giving you news box gride view design demo. this is web design news box usign html,css and bootstrap 4. Using this design you can display your latest news. this is call news feed. this is fully responsive news blog gride example. this design useful for news channel company. bootstrap 4 news templates free download
We allows to free snippets of bootstrap news box , you can download full code of bootstrap news box example layout. Here in this post i will give you example of bootstrap 4 news templates free download snippet and you will get simple code of html, css and jquery. In bootstrap news feed snippet i give you three tab with html, css and js, you can easily get code of bootstrap news feed template layout.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 p-0">
<p><h3> News Design Using Bootstrap 4.0 </h3></p>
</div>
</div>
<div class="row">
<div class="col-md-6 news-section p-0">
<div class="news-item">
<div class="news-post">
<span class="badge badge-success mb-3 mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="https://www.google.co.in/search?q=tajmahal+image&rlz=1C1CHBF_enIN775IN775&oq=tajmahal+image&aqs=chrome..69i57.2221j0j7&sourceid=chrome&ie=UTF-8">
The Tajmahal
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-1.jpg" alt="City in the sky: world's biggest hotel to open in Mecca" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-danger mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
The Biggest Airport In India
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-2.jpg" alt="Why Palladio is the world's favourite 16th-century architect" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-primary mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
" Taj " rebrands all hotels as Taj Hotels Palaces Resorts Safaris
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-3.jpg" alt="Return of the prefabs: inside Richard Rogers' Y:Cube homes for homeless people" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-info mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
</a>
<a href="#">
" The Beggest IT Company in India "
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-4.jpg" alt="The ‘sky pool’ is just the start: London prepares for a flood of bathing oligarchs" class="">
</div>
</div>
<div class="col-md-6 news-section p-0">
<div class="news-item">
<div class="news-post">
<span class="badge badge-danger mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
Renaming of cities in India
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-5.jpg" alt="'This design is total rubbish': Preston's majestic bus station gets a zombie makeover" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-info mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
Get Way In India
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-6.jpg" alt="Why Apple shouldn’t be selling a 16GB iPhone 6S or 6S Plus" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-warning mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
" Beautiful Nature Get Holi Day Plane "
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-7.jpg" alt="iPhone text message bug can crash Apple Watch, iPad and Mac too" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-secondary mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
India No. 1 Sailing Phone Started
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-8.jpg" alt="Sailing off Iceland is no holiday" class="">
</div>
<div class="news-item">
<div class="news-post">
<span class="badge badge-success mb-3">
<a href="#" rel="tag">Latest</a>
</span>
<h1 class="news-title">
<a href="#">
Online Gothenburg: tech travel tips
</a>
</h1>
<span class="news-icon">
<span><i class="fa fa-comments" aria-hidden="true"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="fa fa-calendar" aria-hidden="true"></i> Sep 15, 2015</span>
<span><i class="fa fa-clock-o" aria-hidden="true"></i> 12:00 PM </span>
</span>
<span class="news-social-icon">
<span><a href="https://www.facebook.com/nicesnippets.blog/"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/VimalKashiyani"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="https://in.pinterest.com/nicesnippets/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></span>
</span>
</div>
<img src="//nicesnippets.com/demo/news-img-9.jpg" alt="Online Gothenburg: tech travel tips" class="">
</div>
</div>
</div>
</div>
</body>
</html>
*{
font-family: 'Roboto Condensed', sans-serif;
}
.news-section{
padding:0;
}
.news-item{
float: left;
opacity: 1;
overflow: hidden;
position: relative;
}
.news-item:hover .news-item img{
width:
}
.news-item img{
width: 100%;
height: auto;
}
.news-item a,span{
color:#FFF;
}
.news-item .news-post span.news-icon {
font-family: sans-serif;
font-size:14px;
color: #fff;
margin-top: 15px;
display: inline-block;
}
.news-item .news-post span.news-icon span{
margin-right: 15px;
}
.news-item .news-post span.news-social-icon{
float:right;
}
.news-item .news-post span.news-social-icon span i{
background-color:transparent;
color:#fff;
border:1px solid #fff;
padding:8px;
border-radius: 50%;
height:35px;
width:35px;
text-align: center;
margin:2px 4px 0px 2px;
}
.news-item .news-post span.news-social-icon span i:hover{
background-color:#e1e1e1;
color:#000;
}
.news-item .news-post {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.news-item .news-post h1.news-title {
font-size:28px;
}
.news-post .badge{
letter-spacing:2px;
font-size:15px;
}
