News article grid

Developer
Andy
Size
2,511 Kb
Views
16,192
  1. News article grid Previews
  2. News article grid HTML Codes
  3. News article grid CSS Codes
  4. News article grid JS Codes

How do I make an news article grid?

Blog style news grid where whole thumbnail is clickable with the help of. What is a news article grid? How do you make a news article grid? This script and codes were developed by Andy on 22 November 2022, Tuesday.

News article grid Previews
IQ Test

News article grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>News article grid</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn2.dental-directory.co.uk/Assets/css/style.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="row">	<div class="col-xxs-12">	<ul class="breadcrumb">	<li><a href="/">Home</a></li>	<li>News</li>	</ul>	</div>	</div>	<div class="row">	<div class="col-xxs-12">	<div class="page-header">	<h1>News</h1>	</div>	</div>	</div>	<div class="row news-grid">	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">Great Scott!</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">The Flux Capacitor</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">That's George McFly</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">Save the clock tower</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">The Fish Under The Sea Dance</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">The future, it's where you're going?</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">Doctor Emmett Brown</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">Back to 1985</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">One point twenty-one gigawatts</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">Doc, look, all we need is a little plutonium</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">November 5, 1955</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	<div class="col-xxs-12 col-xs-6 col-md-3 ">	<div class="thumbnail">	<img class="img-responsive" src="http://placehold.it/400x300" alt="">	<div class="news-feature">	<h2><a href="#">The space time continuum</a></h2>	<h4>26/10/1985</h4>	<p>Wait a minute, Doc. What are you talking about? What happens to us in the future?</p>	</div>	</div>	</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://brm.io/js/libs/matchHeight/jquery.matchHeight.js'></script> <script src="js/index.js"></script>
</body>
</html>

News article grid - Script Codes CSS Codes

.thumbnail {	border:none;	background-color:#f5f5f5;	padding:0px 0px 10px 0px;	cursor:pointer;
}
.news-feature {	text-align:left;	padding:0 15px;
}
.news-feature h2 {	margin-top:0;	padding-top:18px;
}
.btn-link {	color:#337ab7;
}

News article grid - Script Codes JS Codes

// Script to make the whole news thumbnail a link
$(".thumbnail").on('click', function() {	window.location = $(this).find("a").attr("href");	return false;
});
// Script to make each news thumbnail match the height of the largest one in its row
$(function() { $('.thumbnail').matchHeight();
});
News article grid - Script Codes
News article grid - Script Codes
Home Page Home
Developer Andy
Username adriver
Uploaded November 22, 2022
Rating 3
Size 2,511 Kb
Views 16,192
Do you need developer help for News article grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy (adriver) Script Codes
Name
Angular App 1
Loupes etc page
Javascript Core Objects
Contact Form
Chart Club
Javascript Functions
View pdf hover state if pdf exists
Sitemap - bootstrap
View pdf
News Feature Article
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!