27 Bootstrap Cards
Tags: bootstrap, javascript, webdev, html
Published: 2021-04-30 06:50:55

A stunning collection of cards built with the newest Bootstrap 5. Weather cards, cards with charts, animated cards & many more. All of them are responsive and compatible with the newest Bootstrap 5.

If you want to learn more about the construction of the cards and get to know the basic and advanced usage of this component - read [📄 Cards documentation](https://mdbootstrap.com/docs/standard/components/cards/) 

___________

## Minimalist statistics cards

[![Minimalist statistics cards](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/1.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898120?view=side)

----

## Statistics with subtitle

[![Statistics with subtitle](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/2.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898141?view=side)

----

## Card with a quote

[![Card with a quote](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/3.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898144?view=side)

----

## Promoting card

[![Promoting card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/4.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898159?view=side)

----

## Weather card

[![Weather card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/5.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898164?view=side)

----

## Map card

[![Map card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/8.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898271?view=side)

----

## Calendar card

[![Calendar card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/9.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898281?view=side)

----

## Panels card

[![Panels card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/10.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898303?view=side)

----

## Testimonial card

[![Testimonial card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/12.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898316?view=side)

----

## Form card

[![Form card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/13.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898319?view=side)

----

## Booking card

[![Booking card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/6.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898188?view=side)

----

## Chart card

[![Chart card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/7.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898195?view=side)

----

## Cards with chips

[![Cards with chips](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/cards/examples/assets/11.jpg)](https://mdbootstrap.com/snippets/standard/mdbootstrap/2898306?view=side)