https://github.com/mdbootstrap/bootstrap-card-deck

Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints
https://github.com/mdbootstrap/bootstrap-card-deck

bootstrap bootstrap5 card-template cards cards-group responsive responsive-design

Last synced: 3 months ago
JSON representation

Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-card-deck
Owner: mdbootstrap
License: mit
Created: 2022-06-13T13:45:04.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-06-15T10:07:38.000Z (almost 3 years ago)
Last Synced: 2025-03-02T01:07:58.155Z (3 months ago)
Topics: bootstrap, bootstrap5, card-template, cards, cards-group, responsive, responsive-design
Language: SCSS
Homepage: https://mdbootstrap.com/docs/standard/extended/card-deck/
Size: 937 KB
Stars: 0
Watchers: 5
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints.

Check out [Bootstrap Card Deck Documentation](https://mdbootstrap.com/docs/standard/extended/card-deck/) for detailed instructions & even more examples.

## Card deck layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.

### Cards group

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.

![Bootstrap Card Deck](https://mdbootstrap.com/img/Marketing/github/card-deck/basic.png)

```html

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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show
that equal height action.

Last updated 3 mins ago

```

### Cards grid

Use the Bootstrap [grid system](https://mdbootstrap.com/docs/standard/layout/grid/) and its `.row-cols` classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.

![Bootstrap Card Deck](https://mdbootstrap.com/img/Marketing/github/card-deck/basic2.png)

```html