→ Kemaya m
→ Blog Post Grid

Blog Post Grid

Responsive blog post grid

This bootstrap css example is contributed by Kemaya m, on 29-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Grid

Author Kemaya m

2.7k

v.5.3

Fork Fullscreen

<div class="container my-5">
    <h1 class="text-center mb-5">Our Latest Blog Posts</h1>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="Blog post image">
                <div class="card-body">
                    <h5 class="card-title">10 Tips for Productive Remote Work</h5>
                    <p class="card-text">Learn how to stay focused and efficient while working from home with these
                        expert tips.</p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">Read More</button>
                        </div>
                        <small class="text-muted"><i class="bi bi-clock"></i> 5 mins read</small>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="Blog post image">
                <div class="card-body">
                    <h5 class="card-title">The Future of Artificial Intelligence</h5>
                    <p class="card-text">Explore the potential impact of AI on various industries and our daily lives.
                    </p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">Read More</button>
                        </div>
                        <small class="text-muted"><i class="bi bi-clock"></i> 8 mins read</small>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="Blog post image">
                <div class="card-body">
                    <h5 class="card-title">Sustainable Living: Small Changes, Big Impact</h5>
                    <p class="card-text">Discover easy ways to reduce your carbon footprint and live a more eco-friendly
                        life.</p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">Read More</button>
                        </div>
                        <small class="text-muted"><i class="bi bi-clock"></i> 6 mins read</small>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card h-100 shadow-sm">
                <img src="https://via.placeholder.com/500x300" class="card-img-top" alt="Blog post image">
                <div class="card-body">
                    <h5 class="card-title">The Art of Mindfulness Meditation</h5>
                    <p class="card-text">Learn techniques to reduce stress and improve mental clarity through
                        mindfulness practices.</p>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">Read More</button>
                        </div>
                        <small class="text-muted"><i class="bi bi-clock"></i> 7 mins read</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples