Bootstrap 5 Blog Section Template Component
Bootstrap 5 blog/news section template is mandatory for all websites. This blog section is fully responsive, easy to customize, and designed clean.
<!-- Blog 1 - HCF Bootstrap 5 Component -->
<section class="bg-light py-5 py-xl-6">
<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 hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px start-10px">Sports</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-1.jpg" alt="">
</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 hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px end-10px">Travel</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-2.jpg" alt="">
</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 hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px start-10px">Photography</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-3.jpg" alt="">
</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 hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px end-10px">Food</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-4.jpg" alt="">
</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>.g-6,
.gx-6 {
--bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
--bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
.g-sm-6,
.gx-sm-6 {
--bs-gutter-x: 4.5rem;
}
.g-sm-6,
.gy-sm-6 {
--bs-gutter-y: 4.5rem;
}
}
@media (min-width: 768px) {
.g-md-6,
.gx-md-6 {
--bs-gutter-x: 4.5rem;
}
.g-md-6,
.gy-md-6 {
--bs-gutter-y: 4.5rem;
}
}
@media (min-width: 992px) {
.g-lg-6,
.gx-lg-6 {
--bs-gutter-x: 4.5rem;
}
.g-lg-6,
.gy-lg-6 {
--bs-gutter-y: 4.5rem;
}
}
@media (min-width: 1200px) {
.g-xl-6,
.gx-xl-6 {
--bs-gutter-x: 4.5rem;
}
.g-xl-6,
.gy-xl-6 {
--bs-gutter-y: 4.5rem;
}
}
@media (min-width: 1400px) {
.g-xxl-6,
.gx-xxl-6 {
--bs-gutter-x: 4.5rem;
}
.g-xxl-6,
.gy-xxl-6 {
--bs-gutter-y: 4.5rem;
}
}
.mb-6 {
margin-bottom: 4.5rem !important;
}
.py-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.top-5px {
top: 5px !important;
}
.top-10px {
top: 10px !important;
}
.bottom-5px {
bottom: 5px !important;
}
.bottom-10px {
bottom: 10px !important;
}
.start-5px {
left: 5px !important;
}
.start-10px {
left: 10px !important;
}
.end-5px {
right: 5px !important;
}
.end-10px {
right: 10px !important;
}
.hcf-of-cover {
object-fit: cover !important;
}
.hcf-op-center {
object-position: center !important;
}
.hcf-ih-250 {
height: 250px !important;
}
.hcf-ih-400 {
height: 400px !important;
}
@media (min-width: 576px) {
.mb-sm-6 {
margin-bottom: 4.5rem !important;
}
.py-sm-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.hcf-ih-sm-250 {
height: 250px !important;
}
.hcf-ih-sm-400 {
height: 400px !important;
}
}
@media (min-width: 768px) {
.mb-md-6 {
margin-bottom: 4.5rem !important;
}
.py-md-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.hcf-ih-md-250 {
height: 250px !important;
}
.hcf-ih-md-400 {
height: 400px !important;
}
}
@media (min-width: 992px) {
.mb-lg-6 {
margin-bottom: 4.5rem !important;
}
.py-lg-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.hcf-ih-lg-250 {
height: 250px !important;
}
.hcf-ih-lg-400 {
height: 400px !important;
}
}
@media (min-width: 1200px) {
.mb-xl-6 {
margin-bottom: 4.5rem !important;
}
.py-xl-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.hcf-ih-xl-250 {
height: 250px !important;
}
.hcf-ih-xl-400 {
height: 400px !important;
}
}
@media (min-width: 1400px) {
.mb-xxl-6 {
margin-bottom: 4.5rem !important;
}
.py-xxl-6 {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.hcf-ih-xxl-250 {
height: 250px !important;
}
.hcf-ih-xxl-400 {
height: 400px !important;
}
}
.hcf-transform {
transform: scale3d(1, 1, 1);
transform-style: preserve-3d;
transition: all 0.5s;
}
.hcf-transform:hover {
transform: scale3d(1.02, 1.02, 1.02);
}Bootstrap 5 Blog Section Example
The Bootstrap 5 blog section is free and easy to integrate into any Bootstrap 5 project. It has a minimal and uncluttered layout.