Card

See React Bootstrap/Cards for full documentation and props.

Result

Loading...

Live Editor

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

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

Color variants

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridGap: '2rem' }}> {['', 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark'].map( (variant) => ( <> <div> <Card bg={variant.toLowerCase()}> <Card.Body> <Card.Title>Title</Card.Title> <Card.Subtitle>Subtitle</Card.Subtitle> <Card.Text>Card body text</Card.Text> </Card.Body> </Card> </div> <Card bg={variant.toLowerCase()}> <Card.Header>Header</Card.Header> <Card.Body> <Card.Title>Title</Card.Title> <Card.Subtitle>Subtitle</Card.Subtitle> <Card.Text>Body</Card.Text> </Card.Body> <Card.Footer>Footer</Card.Footer> </Card> </> ), )} </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridGap: '2rem' }}>
    {['', 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark'].map(
        (variant) => (
            <>
                <div>
                    <Card bg={variant.toLowerCase()}>
                        <Card.Body>
                            <Card.Title>Title</Card.Title>
                            <Card.Subtitle>Subtitle</Card.Subtitle>
                            <Card.Text>Card body text</Card.Text>
                        </Card.Body>
                    </Card>
                </div>
                <Card bg={variant.toLowerCase()}>
                    <Card.Header>Header</Card.Header>
                    <Card.Body>
                        <Card.Title>Title</Card.Title>
                        <Card.Subtitle>Subtitle</Card.Subtitle>
                        <Card.Text>Body</Card.Text>
                    </Card.Body>
                    <Card.Footer>Footer</Card.Footer>
                </Card>
            </>
        ),
    )}
</div>

Grids

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gridGap: '12px', }} > <Card> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> <Card> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> <Card> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> </div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gridGap: '12px',
    }}
>
    <Card>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
    <Card>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
    <Card>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
</div>

Grouping

Result

Loading...

Live Editor

<CardGroup> <Card> <Card.Header>A Cat Card</Card.Header> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> <Card> <Card.Header>A Cat Card</Card.Header> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> <Card> <Card.Header>A Cat Card</Card.Header> <Card.Img variant="top" src={images.cardImg} /> <Card.Body> <Card.Title>This is a great cat card</Card.Title> <Card.Subtitle>Meow</Card.Subtitle> <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text> <Card.Link>Find more cats</Card.Link> </Card.Body> </Card> </CardGroup>

<CardGroup>
    <Card>
        <Card.Header>A Cat Card</Card.Header>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
    <Card>
        <Card.Header>A Cat Card</Card.Header>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
    <Card>
        <Card.Header>A Cat Card</Card.Header>
        <Card.Img variant="top" src={images.cardImg} />
        <Card.Body>
            <Card.Title>This is a great cat card</Card.Title>
            <Card.Subtitle>Meow</Card.Subtitle>
            <Card.Text>We aren't totally sure if this is a Jellicle Cat or not.</Card.Text>
            <Card.Link>Find more cats</Card.Link>
        </Card.Body>
    </Card>
</CardGroup>

Props