Basic Card

Basic card

Card Image

Image at the top (card-img-top):

Card image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Image at the bottom (card-img-bottom):

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile
Card image

Cards Columns

The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards.

Note: The cards are displayed vertically on small screens (less than 576px):

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

Card Deck

The .card-deck class creates an equal height and width grid of cards. The layout will automatically adjust as you insert more cards.

In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.

Note: The cards are displayed vertically on small screens (less than 576px):

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Card Group

The .card-group class is similar to .card-deck, which creates an equal height and width grid of cards.

However, the .card-group class removes left and right margins between each card.

In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.

Note: The cards are displayed vertically on small screens (less than 576px), WITH top and bottom margin:

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card