Bootstrap news feed image and text

Here is an example of a Bootstrap news feed with images and text:

HTML

<div class="row">
  <div class="col-md-4">
    <div class="news-feed">
      <img src="image1.jpg" alt="News Image 1" class="img-fluid">
      <h5>News Title 1</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
      <span class="date">March 10, 2023</span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="news-feed">
      <img src="image2.jpg" alt="News Image 2" class="img-fluid">
      <h5>News Title 2</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
      <span class="date">March 12, 2023</span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="news-feed">
      <img src="image3.jpg" alt="News Image 3" class="img-fluid">
      <h5>News Title 3</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
      <span class="date">March 15, 2023</span>
    </div>
  </div>
</div>

CSS

.news-feed {
  background-color: #f7f7f7;
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

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

.news-feed h5 {
  font-weight: bold;
  margin-top: 0;
}

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

.news-feed span.date {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

JavaScript

// No JavaScript required for this example

This code creates a Bootstrap row with three columns, each containing a news feed item with an image, title, text, and date. The image is displayed as a background image using the img-fluid class, and the title, text, and date are displayed using HTML elements. The news feed items are styled using CSS to create a clean and modern design.

You can customize the appearance of the news feed by modifying the CSS styles. You can also add more news feed items by duplicating the HTML code and modifying the image, title, text, and date for each item.