cards in react bootstrap code example
Example: style cards react
<>
<Card bg="primary" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Primary Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="secondary" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Secondary Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="success" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Success Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="danger" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Danger Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="warning" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Warning Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="info" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Info Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="dark" text="white" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Dark Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
<Card bg="light" style={{ width: '18rem' }}>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Light Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</Card.Text>
</Card.Body>
</Card>
<br />
</>