Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
<Card.Body> to pad content inside a
Alternatively, you can use this shorthand version for Cards with body only, and no other children
Title, text, and links
<Card.Text> inside the
<Card.Body> will line them up nicely.
<Card.Link>s are used to line up links next to each other.
<p> tags around the content, so you can
<Card.Text>s to create separate paragraphs.
Create lists of content in a card with a flush list group.
Header and Footer
You may add a header by adding a
<CardHeader> can be styled by passing a heading element
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
Add some navigation to a card’s header (or block) with React Bootstrap’s Nav components.
You can change a card's appearance by changing their
Row's grid column props to control how many cards to show per row.