Card columns
Bootstrap 5 Card columns component
Responsive card columns built with the latest Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials.
Basic example
Use class .row-cols to control how many grid columns (wrapped around your cards) you show
per row. Here’s .row-cols-3 laying out the cards on three columns.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Two columns
Use the class .row-cols-2 to lay out the cards on two columns.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Responsive
Here’s .row-cols-1 laying out the cards on one column, .row-cols-md-2 splitting cards to equal width across multiple rows, from the medium breakpoint up and .row-cols-lg-3 splitting cards from the large breakpoint up.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Spacing
Use gutters to add padding between your columns. Add .g-* to the main div.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Equal height
When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Horizontal
Here’s an example of columns with horizontal cards.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago