→ Anonymous
→ Card grid

Card grid

card grid for blog articles etc.
it also has author's details

This bootstrap css example is contributed by Anonymous, on 15-Jul-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Grid

Author Anonymous

1.5k

v.4.6

Fork Fullscreen

<section class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col text-center mb-5">
                <h1 class="display-4 font-weight-bolder">Bootstrap 4 Cards With Background Image</h1>
                <p class="lead">Lorem ipsum dolor sit amet at enim hac integer volutpat maecenas pulvinar. </p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web
                                    Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?tree,nature');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tree,nature" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Creative
                                    Manner Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?computer,design');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?computer,design" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Design
                                    Studio Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt=" Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">UI/UX
                                    Design Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?tree,nature');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tree,nature" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Creative
                                    Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card text-dark card-has-bg click-col"
                    style="background-image:url('https://source.unsplash.com/600x900/?computer,design');">
                    <img class="card-img d-none" src="https://source.unsplash.com/600x900/?computer,design" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                    <div class="card-img-overlay d-flex flex-column">
                        <div class="card-body">
                            <small class="card-meta mb-2">Thought Leadership</small>
                            <h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Creative
                                    Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
                            <small><i class="far fa-clock"></i> October 15, 2020</small>
                        </div>
                        <div class="card-footer">
                            <div class="media">
                                <img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
                                <div class="media-body">
                                    <h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
                                    <small>Director of UI/UX</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

</div>

</div>
</section>

More Examples

Bootstrap Image Gallery

Author:
Anonymous

1 year ago

3.7k

v.3.4
Blog Post Grid
Responsive blog post grid

Author:
Kemaya m

1 year ago

1.7k

v.5.3
Bento grid bootstrap

Author:
Anonymous

8 months ago

1.2k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.6k

v.5.3
Bento Grid with Bootstrap 5

Author:
C B

10 months ago

1.1k

v.5.3
Bento Grid Layout with Images

Author:
Juan Martinez

1 year ago

2.9k

v.5.3
Products Grid
E-commerce product grid

Author:
Juan Martinez

1 year ago

3.5k

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

10 months ago

1.2k

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

1 year ago

4.4k

v.5.3
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

1 year ago

3.9k

v.5.3
Modern 404 Error Page with Lottie Animation and Bootstrap Layout
This elegant and responsive 404 error page is built with Bootstrap 5 and features a smooth, animated Lottie illustration to enhance user experience. The layout is fully responsive, with the animation and error message side-by-side on larger screens and stacked on smaller devices. It includes a clear "Back to homepage" button, making it user-friendly and ideal for maintaining engagement even when users encounter a broken link or missing page.

Author:
Talha Abdullah Bangyal

3 months ago

1.8k

v.5.3
Pricing Cards

Author:
Anonymous

9 months ago

3.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent