15+ Bootstrap Cards Examples

15+ Bootstrap Cards Examples

Hello there! In this article, you will find 15+ Bootstrap card designs with HTML and CSS complete source code so you just copy and paste it into your project.

Bootstrap cards are very fluid and easily adapt to the size of the screen. For example, on a big computer screen, the cards arrange themselves in a gallery format, just like on Pinterest. When you see the same content on mobile devices, they arrange themselves in a vertical format for a thumb-friendly design.

This flexible nature of the bootstrap cards makes them not only a secondary element but also a core element in a design.

Don’t worry we’ve got you covered. We have Handpicked the best 15+ Bootstrap card designs from the web for you to use in your project.

Let’s see some cool 15+ Bootstrap card designs.

1. card hover effect

Code by Kalpesh Singh Rajpurohit
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies No
Responsive Yes

Let’s start our list with a modern-looking card design by Kalpesh Singh Rajpurohit, on hover the cards have a pop-out effect, and also the background of the cards changes with a sliding effect from the bottom right.

2. Modern – Bootstrap 4 Cards

Code by Frontend.sdc
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

This one is a collection of card designs. It has cards for products, profiles, testimonials, blogs, and also simple plain cards. Plenty to choose from.

3. Bootstrap Cards

Code by les
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies No
Responsive Yes

A minimal-looking card design to show statistics by less. Could be used on admin panels to show a platform’s statistics.

4. Bootstrap cards tutorial

Code by Alex Devero
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive Yes

A simple card design by Alex Devero with a border glow effect on hover. Additionally, load cards come from sides and below their positions.

15+ Best CSS Hover Effects With Code

5. Bootstrap Cards

Code by reklam
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

A simple-looking and a responsive bootstrap card with effects on hover.

6. Bootstrap Cards

Code by Bekir Han BAYAR
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies No
Responsive Yes

This is also a collection of cards with four different card profile card designs. Pick your poison!

7. bootstrap cards responsive

Code by Julia
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

Simple and responsive card design by Julia. Perfect if you need lots of space for an image and a few lines for text.

8. Bootstrap Profile Cards 2019

Code by Sahar Ali Raza
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

A collection of three different profile card designs, all with unique transition effects.

9. Horizontal bootstrap Cards with Carousel – Bootstrap 4 Pub

Code by Mathematics
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

All most every card we have shown to this point is vertical, so let’s change things a bit. Horizontal card design by Mathematics.

Draggable Elements using HTML, CSS &JavaScript

10. Alternating Horizontal Bootstrap Cards

Code by duness
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies Yes
Responsive Yes

Another horizontal card design but this one is more modern looking, also these cards don’t have any borders.

11. Bootstrap Card Grid

Code by Nikki Peel
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

This Bootstrap card design is using linear-gradients with dark theme colors. could be used in blogs, portfolios, or eCommerce sites.

12. Bootstrap Cards

Code by Sunil_Salaria
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

Modern-looking and Responsive profile card design, it even has a special cut out for profile photographs.

13. Custom Bootstrap 4 card

Code by Peter Daniš
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies No
Responsive Yes

Modern-looking card design by Peter Daniš. I would say it has a very Twitter-like profile photo & banner design, which looks pretty cool.

14. Bootstrap – cards

Code by Alex McCarthy
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

Few different card designs in this, some with images along with text and some with only text. you can choose whichever suits you.

Simple Registration Form Source Code Using HTML & CSS

15. Bootstrap Cards – Material Design & Bootstrap 4

Code by MDBootstrap
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

Most of the card designs we have seen have a white background and one accent color. This one is different It has more colors. Additionally, there is a nice effect on clicking the images.

16. Cards

Code by Rajeev
Demo & download click here for code
Language used HTML, CSS, and JS
External link / Dependencies Yes
Responsive Yes

Let’s end today’s list with a great design by Rajeev. In this design cards also have a like or a save button on the top right side.

That’s it, folks. In this article, we shared 15+ Bootstrap cards with cool and different designs using Html and CSS. We have covered a lot of different Bootstrap cards today. light themed, dark themed, with image, only text, profile cards, and blog cards, We have covered a lot

. Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and Happy Learning!!

follow us on Instagram : @codewith_random
Written by : @ayushgoel

Leave a Reply