Bootstrap Card

The outer .card container. A flex column with a white background, 1px border, and border-radius. Acts as a visual grouping surface for a related set of content.

Bootstrap sets word-wrap: break-word so long strings never overflow the card.

The .card-img-top image is flush with the card's top edge, ignoring the card's padding. Bootstrap uses border-radius inheritance and object-fit: cover by default.

Always provide a meaningful alt attribute — or alt="" for purely decorative images.

The .card-body wrapper provides consistent padding around the card's primary content. It is a flex column and grows to fill available space when the card is used in a grid of equal-height cards.

The .card-title element — semantically an <h5> in most Bootstrap examples, but should match the correct heading level in context.

Sets margin-bottom: 0.5rem by default. Colour inherits from the card body.

The .card-text paragraph. Multiple .card-text elements inside a .card-body have their last-child bottom margin removed automatically to keep spacing consistent.

The .card-footer provides a visually separated bottom section, typically used for metadata, timestamps, or secondary actions.

Background defaults to rgba(0,0,0,0.03) with a top border. Bootstrap automatically rounds the footer's bottom corners to match the card.