Cards Elements

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

John Doe

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

See Profile

John Doe

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

See Profile

John Doe

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

See Profile

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

Jane Doe

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

See Profile

Jane Doe

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

See Profile

Jane Doe

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

See Profile

Card Image Overlay (card-img-overlay):

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

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):

Card Deck:

The .card-deck class creates an equal height and widthgrid 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):

Card Group:

The .card-group class is similar to .card-deck, which creates an equal height and widthgrid 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), WITHtop and bottom margin: