Card

See React Bootstrap/Cards for full documentation and props.

Result

Loading...

Live Editor

<div data-testid="pw-card"> <Card style={{ width: '75%', marginLeft: 'auto', marginRight: 'auto' }}> <Card.Header>Header</Card.Header> <Card.Body> <Card.Title>Title</Card.Title> <Card.Subtitle>Subtitle</Card.Subtitle> <Card.Text>Body</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> <Card.Footer>Footer</Card.Footer> </Card> </div>

<div data-testid="pw-card">
    <Card style={{ width: '75%', marginLeft: 'auto', marginRight: 'auto' }}>
        <Card.Header>Header</Card.Header>
        <Card.Body>
            <Card.Title>Title</Card.Title>
            <Card.Subtitle>Subtitle</Card.Subtitle>
            <Card.Text>Body</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
        <Card.Footer>Footer</Card.Footer>
    </Card>
</div>

Sizes

Result

Loading...

Live Editor

<div className="d-grid k-gap-5"> {['xs', 'sm', 'md', 'lg'].map((size) => ( <Card key={size} size={size}> <Card.Body>Card!</Card.Body> </Card> ))} </div>

<div className="d-grid k-gap-5">
    {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Card key={size} size={size}>
            <Card.Body>Card!</Card.Body>
        </Card>
    ))}
</div>

Border

Result

Loading...

Live Editor

<div> <Card border> <Card.Body>Card with border</Card.Body> </Card> </div>

<div>
    <Card border>
        <Card.Body>Card with border</Card.Body>
    </Card>
</div>

Shadows

Result

Loading...

Live Editor

<div className="d-grid k-gap-8"> {['none', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => ( <Card key={size} shadow={size}> <Card.Body>Card!</Card.Body> </Card> ))} </div>

<div className="d-grid k-gap-8">
    {['none', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
        <Card key={size} shadow={size}>
            <Card.Body>Card!</Card.Body>
        </Card>
    ))}
</div>

Avoiding padding

To avoid padding in the card you can omit the Card.Body component.

Result

Loading...

Live Editor

<div> <Card border>Card without padding</Card> </div>

<div>
    <Card border>Card without padding</Card>
</div>

Props