Bootstrap news feed template free

Here is a free Bootstrap news feed template that you can use as a starting point for your project:

Template Name: News Feed Template

Description: A responsive Bootstrap news feed template that displays a list of news articles with images, titles, and summaries.

Features:

Responsive design that adapts to different screen sizes and devices
Bootstrap 4 framework for easy customization and styling
News feed layout with images, titles, and summaries
Optional filtering and sorting functionality
Customizable colors and typography

HTML Structure:

<!-- News Feed Container -->
<div class="news-feed-container">
  <!-- News Feed Header -->
  <div class="news-feed-header">
    <h2>Latest News</h2>
  </div>
  <!-- News Feed List -->
  <ul class="news-feed-list">
    <!-- News Feed Item -->
    <li class="news-feed-item">
      <img src="image.jpg" alt="News Image" class="news-feed-image">
      <h3 class="news-feed-title">News Title</h3>
      <p class="news-feed-summary">News Summary</p>
    </li>
    <!-- More News Feed Items -->
  </ul>
  <!-- Pagination -->
  <div class="pagination">
    <ul>
      <li><a rel="nofollow" target="_blank" href="#" class="prev">Previous</a></li>
      <li><a rel="nofollow" target="_blank" href="#" class="next">Next</a></li>
    </ul>
  </div>
</div>

CSS Styles:

/* News Feed Container Styles */
.news-feed-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* News Feed Header Styles */
.news-feed-header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

/* News Feed List Styles */
.news-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-feed-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.news-feed-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.news-feed-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.news-feed-summary {
  font-size: 14px;
  color: #666;
}

/* Pagination Styles */
.pagination {
  text-align: center;
  padding: 20px;
}

.pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  display: inline-block;
  margin-right: 10px;
}

.pagination a {
  color: #337ab7;
  text-decoration: none;
}

.pagination a:hover {
  color: #23527c;
}

JavaScript Code:

// Add event listener to pagination links
document.querySelectorAll('.pagination a').forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    // Get the pagination link text
    var linkText = link.textContent;
    // Update the news feed list with the new pagination link text
    updateNewsFeed(linkText);
  });
});

// Function to update the news feed list
function updateNewsFeed(linkText) {
  // Get the news feed list element
  var newsFeedList = document.querySelector('.news-feed-list');
  // Clear the news feed list
  newsFeedList.innerHTML = '';
  // Add new news feed items based on the pagination link text
  //...
}

How to Use:

Copy the HTML structure and CSS styles into your own project.
Customize the CSS styles to fit your desired design.
Add your own news feed data to the JavaScript code.
Update the news feed list by calling the updateNewsFeed function with the new pagination link text.

Note: This is just a basic template, and you will need to customize it to fit your specific needs. You may also need to add additional functionality, such as filtering and sorting, depending on your requirements.

NewsBreakers

Bootstrap news feed template free