Bootstrap news feed template
Here is a basic Bootstrap news feed template:
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>News Feed</h1>
<ul class="list-group">
<li class="list-group-item">
<h4>Article 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
<span class="badge badge-primary">1 hour ago</span>
</li>
<li class="list-group-item">
<h4>Article 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
<span class="badge badge-primary">2 hours ago</span>
</li>
<li class="list-group-item">
<h4>Article 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
<span class="badge badge-primary">3 hours ago</span>
</li>
<!-- Add more articles here -->
</ul>
</div>
</div>
</div>
CSS (optional)
.list-group-item {
padding: 15px;
border-bottom: 1px solid #ddd;
}
.list-group-item h4 {
font-weight: bold;
margin-top: 0;
}
.list-group-item p {
font-size: 14px;
color: #666;
}
.badge {
font-size: 12px;
padding: 5px 10px;
border-radius: 50%;
background-color: #337ab7;
color: #fff;
}
.badge-primary {
background-color: #337ab7;
}
JavaScript (optional)
// Add more articles to the list
var articles = [
{
title: "Article 1",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.",
timestamp: "1 hour ago"
},
{
title: "Article 2",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.",
timestamp: "2 hours ago"
},
{
title: "Article 3",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.",
timestamp: "3 hours ago"
}
];
// Loop through the articles and add them to the list
$.each(articles, function(index, article) {
var $article = $("<li class='list-group-item'></li>");
$article.append("<h4>" + article.title + "</h4>");
$article.append("<p>" + article.content + "</p>");
$article.append("<span class='badge badge-primary'>" + article.timestamp + "</span>");
$(".list-group").append($article);
});
This template uses Bootstrap's grid system to create a responsive layout, and the list-group
component to display the news feed. You can customize the template by adding more articles, changing the layout, and modifying the CSS and JavaScript code.
Note: This is just a basic template, and you will need to add more functionality and styling to make it suitable for your specific use case.