<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
<div class="container">
<div class="text-center mb-16">
<span class="h6 text-primary">What's new at Shuffle</span>
<h2 class="text-white mt-10">Latest blog</h2>
</div>
<div class="row mb-24">
<div class="col-12 col-md-4 px-lg-6 mb-14 mb-md-0">
<div class="mw-md mx-auto position-relative" style="z-index: 2;">
<img class="position-absolute top-0 end-100 mt-36 img-fluid" src="zospace-assets/lines/left-line.svg" alt="">
<a class="d-block text-decoration-none" href="#">
<div class="position-relative">
<img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<div class="position-absolute start-0 bottom-0 m-5">
<div class="pt-2 bg-primary rounded-top"></div>
<div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom">
<span class="d-block h5 fw-bold mb-0">30</span>
<span class="small fw-bold text-secondary">FEB</span>
</div>
</div>
</div>
<div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
<div class="pt-5 border-top">
<h5 class="text-white">Is remote work working? A one year check-in</h5>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4 px-lg-6 mt-md-24 mb-14 mb-md-0">
<div class="mw-md mx-auto position-relative" style="z-index: 1;">
<img class="position-absolute top-0 end-100 img-fluid" src="zospace-assets/lines/right-line.svg" alt="">
<a class="d-block text-decoration-none" href="#">
<div class="position-relative" style="z-index: 1;">
<img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/5325768/pexels-photo-5325768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<div class="position-absolute start-0 bottom-0 m-5">
<div class="pt-2 bg-primary rounded-top"></div>
<div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom">
<span class="d-block h5 fw-bold mb-0">29</span>
<span class="small fw-bold text-secondary">FEB</span>
</div>
</div>
</div>
<div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
<div class="pt-5 border-top">
<h5 class="text-white">10 ways to keep your remote teams engaged</h5>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4 px-lg-6">
<div class="mw-md mx-auto position-relative">
<img class="position-absolute top-0 end-100 mt-36 img-fluid" src="zospace-assets/lines/left-line.svg" alt="">
<a class="d-block text-decoration-none" href="#">
<div class="position-relative" style="z-index: 1;">
<img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover;" src="https://images.pexels.com/photos/5325708/pexels-photo-5325708.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<div class="position-absolute start-0 bottom-0 m-5">
<div class="pt-2 bg-primary rounded-top"></div>
<div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom">
<span class="d-block h5 fw-bold mb-0">29</span>
<span class="small fw-bold text-secondary">FEB</span>
</div>
</div>
</div>
<div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
<div class="pt-5 border-top">
<h5 class="text-white">How to make a concept map (+Examples)</h5>
</div>
</div>
</a>
<img class="position-absolute top-0 start-100 mt-36 img-fluid" src="zospace-assets/lines/right-line.svg" alt="">
</div>
</div>
</div>
<div class="text-center"><a class="btn btn-primary" href="#">See all</a></div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 43
- Applications 5
- Banner 15
- Blog 53
- Call to action 86
- Contact 28
- Contacts 5
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 39
- Features 118
- Footers 48
- Graphs 18
- HTTP codes 43
- Headers 86
- How it works 39
- Logo clouds 68
- Modals 3
- Navbar 68
- Navigation (horizontal) 80
- Navigation (vertical) 6
- Navigations 4
- Newsletter 41
- Portfolio 39
- Pricing 35
- Projects 9
- Reviews 5
- Sign in / Sign up 65
- Stats 71
- Tables 52
- Tables 5
- Team 35
- Testimonials 35
- 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.
Component #6
Component #7
Component #8
Component #9
Component #10
