<section class="pt-20 pb-36 bg-black overflow-hidden">
<div class="container">
<div class="text-center mw-lg mx-auto mb-20">
<h2 class="fs-10 fw-semibold text-white mb-4">Latest news</h2>
<p class="fs-17 text-secondary-light">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
</div>
<div class="row g-6">
<div class="col-12 col-md-6 col-lg-3">
<a href="#">
<div class="position-relative mw-100">
<img class="w-100 rounded-3" src="gradia-assets/images/blog/blog1.png" alt="">
<div class="position-absolute bottom-0 start-0 w-100 rounded-3">
<div class="p-2">
<div class="bg-black bg-opacity-75 p-4 w-100 rounded-3">
<span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;">Technology . 4 min read</span>
<h3 class="fs-17 fw-semibold lh-sm text-white mb-0">You will never believe these bizarre truth of travel.</h3>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#">
<div class="position-relative mw-100">
<img class="w-100 rounded-3" src="gradia-assets/images/blog/blog2.png" alt="">
<div class="position-absolute bottom-0 start-0 w-100 rounded-3">
<div class="p-2">
<div class="bg-black bg-opacity-75 p-4 w-100 rounded-3">
<span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;">Technology . 4 min read</span>
<h3 class="fs-17 fw-semibold lh-sm text-white mb-0">You will never believe these bizarre truth of travel.</h3>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#">
<div class="position-relative mw-100">
<img class="w-100 rounded-3" src="gradia-assets/images/blog/blog3.png" alt="">
<div class="position-absolute bottom-0 start-0 w-100 rounded-3">
<div class="p-2">
<div class="bg-black bg-opacity-75 p-4 w-100 rounded-3">
<span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;">Technology . 4 min read</span>
<h3 class="fs-17 fw-semibold lh-sm text-white mb-0">You will never believe these bizarre truth of travel.</h3>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#">
<div class="position-relative mw-100">
<img class="w-100 rounded-3" src="gradia-assets/images/blog/blog4.png" alt="">
<div class="position-absolute bottom-0 start-0 w-100 rounded-3">
<div class="p-2">
<div class="bg-black bg-opacity-75 p-4 w-100 rounded-3">
<span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;">Technology . 4 min read</span>
<h3 class="fs-17 fw-semibold lh-sm text-white mb-0">You will never believe these bizarre truth of travel.</h3>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 58
- Banners 15
- Blog 84
- Call to action 99
- Careers 8
- Contact 42
- Content 62
- Cookies 48
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 49
- Features 140
- Footers 58
- Graphs 18
- HTTP codes 55
- Hero section 96
- How it works 46
- Logo clouds 80
- Modals 6
- Navbar 68
- Navigation (horizontal) 97
- Navigation (vertical) 6
- Newsletter 49
- Portfolio 39
- Pricing 47
- Projects 9
- Reviews 5
- Rich text 3
- Sign in / Sign up 81
- Stats 84
- Tables 57
- Team 46
- Testimonials 46
- Users 25
Having a blog is one of the most commonly chosen SEO strategies. However, for a blog to fulfill this role, it should be well designed and attractive to the audience. Our selection of Bootstrap blog components will help you achieve this effect.
Choose from many variations of Bootstrap blog posts components. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Bootstrap blog posts components, code and our editor. Try the demo for free.
