Bootstrap 6 Cards — 10 Free Card Templates
Ten Bootstrap 6 card patterns covering what projects actually reach for — content and media cards, horizontal layouts, pricing tiers, profile cards, dashboard metrics with a CSS sparkline, commerce product cards, editorial article cards, properly-built clickable cards and a grid that reflows without breakpoint classes.
Every media area in this pack is a CSS gradient rather than a bundled photograph, so there is nothing to re-license and nothing to replace before you ship. The pack also settles the clickable-card question properly: wrapping a card in an anchor swallows any button inside it and gives the link an accessible name made of the card’s entire text, so the whole-card variant stretches a single title link with a pseudo-element instead — the full surface stays clickable while the tab order and the announced name stay sensible.
Key features
- Ten standalone card pages plus an index gallery
- Zero image dependencies — every media area is a CSS gradient
- Dashboard metric tiles with a sparkline built from flex spans, no chart library
- Three-tier pricing row with the featured card outlined rather than scaled
- Product cards with sale badges, star ratings and struck-through was-prices
- Whole-card links done properly — stretched title link, not a wrapping anchor
- Profile cards using the v6 Avatar and Chip components
- Equal-height card rows via h-100 with mt-auto actions
- Responsive grid using repeat(auto-fill, minmax()) — no breakpoint classes
- Notes on avoiding layout shift with aspect-ratio and object-fit
- Bootstrap 6 vendored at a pinned commit, ESM-only, no build step
Before you use it
Bootstrap 6 has not been released. npm i bootstrap@6 does not work yet and the framework is still changing, so treat this as a head start on learning v6 rather than a foundation for a production site you need to maintain today. The framework is vendored into the template at a pinned commit, so nothing here can drift. It targets evergreen browsers only — Safari 16.4+, Chrome 111+ and Firefox 113+ — because Bootstrap 6 is built on oklch() and color-mix().
