Bootstrap 5 Stylish Blog Layout Section

This Bootstrap Blog section is ready to use for the Bootstrap blog templates. We have displayed Featured images of the blog posts in an alternate pattern.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Blog / News Layout Snippet

The Bootstrap 5 blog layout example is stylish and elegant. This layout snippet will help you create a gorgeous website for clients instantly.

These blog/news layout snippets are the best fit for your web projects. They come with all the vital features required for blog/news layout.

Features

  • Bootstrap 5
  • BSB Framework
  • Hover Effect
  • Featured Image
  • HTML5 & CSS3
  • W3C Valid
  • Clean Snippet
  • Commented Code
  • Responsive Layout
  • Easy to Use
  • SEO Optimized
  • Cross Browser Compatible
<!-- Blog 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container overflow-hidden">
    <div class="row gy-5">
      <div class="col-12">
        <div class="row align-items-center gy-3 gy-md-0 gx-xl-5">
          <div class="col-xs-12 col-md-6">
            <div class="img-wrapper position-relative bsb-hover-push">
              <a href="#!">
                <span class="badge rounded-pill text-bg-warning position-absolute top-0 start-0 m-3">Sports</span>
                <img class="img-fluid rounded w-100 h-100 object-fit-cover" loading="lazy" src="./assets/img/blog-image-1.jpg" alt="Sports">
              </a>
            </div>
          </div>
          <div class="col-xs-12 col-md-6">
            <div>
              <p class="text-secondary mb-1">Nov 11, 2022</p>
              <h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Useful Skateboarding Tips For Beginners</a></h2>
              <p class="mb-4">Learning how to skateboard can be a simultaneously exciting and terrifying experience. Explore the 20 top tips for beginner skaters.</p>
              <a class="btn btn-primary" href="#!" target="_self">Read More</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="row align-items-center flex-row-reverse gy-3 gy-md-0 gx-xl-5">
          <div class="col-xs-12 col-md-6">
            <div class="img-wrapper position-relative bsb-hover-push">
              <a href="#!">
                <span class="badge rounded-pill text-bg-warning position-absolute top-0 end-0 m-3">Travel</span>
                <img class="img-fluid rounded w-100 h-100 object-fit-cover" loading="lazy" src="./assets/img/blog-image-2.jpg" alt="Travel">
              </a>
            </div>
          </div>
          <div class="col-xs-12 col-md-6">
            <div>
              <p class="text-secondary mb-1">Oct 9, 2022</p>
              <h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Strange Facts About Hot Air Balloons</a></h2>
              <p class="mb-4">You think the Wright Brothers were impressive? Hot air balloons were carrying people through the air almost a century before the Wright Brothers were even born.</p>
              <a class="btn btn-primary" href="#!" target="_self">Read More</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="row align-items-center gy-3 gy-md-0 gx-xl-5">
          <div class="col-xs-12 col-md-6">
            <div class="img-wrapper position-relative bsb-hover-push">
              <a href="#!">
                <span class="badge rounded-pill text-bg-warning position-absolute top-0 start-0 m-3">Photography</span>
                <img class="img-fluid rounded w-100 h-100 object-fit-cover" loading="lazy" src="./assets/img/blog-image-3.jpg" alt="Photography">
              </a>
            </div>
          </div>
          <div class="col-xs-12 col-md-6">
            <div>
              <p class="text-secondary mb-1">Sep 17, 2022</p>
              <h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Reasons Why Photography Is an Art Form</a></h2>
              <p class="mb-4">Before the first photo was captured in the 18th century, lifelike images of what the eyes can see could only be made by talented artists.</p>
              <a class="btn btn-primary" href="#!" target="_self">Read More</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="row align-items-center flex-row-reverse gy-3 gy-md-0 gx-xl-5">
          <div class="col-xs-12 col-md-6">
            <div class="img-wrapper position-relative bsb-hover-push">
              <a href="#!">
                <span class="badge rounded-pill text-bg-warning position-absolute top-0 end-0 m-3">Food</span>
                <img class="img-fluid rounded w-100 h-100 object-fit-cover" loading="lazy" src="./assets/img/blog-image-4.jpg" alt="Food">
              </a>
            </div>
          </div>
          <div class="col-xs-12 col-md-6">
            <div>
              <p class="text-secondary mb-1">Aug 23, 2022</p>
              <h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Benefits of Having a Heavy Breakfast Every Morning</a></h2>
              <p class="mb-4">Running late for work or school? "Let’s skip the breakfast!" Well, this might sound like the most ideal idea to save time when you are on the run.</p>
              <a class="btn btn-primary" href="#!" target="_self">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/blogs/blog-1/assets/css/blog-1.css">
  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 8 Pro Templates
  • Access to all 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Club

Agency

$149

12 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute