i'm trying to learn new features and general stuff about react-bootstrap (i'm pretty new to front-end). I was playing around with bootstrap features, and i was trying to customize some stuff on Cards in particular.

I was trying to make each Card component different from each other style-wise. Like for example, i wanted the Header in "primary" style, while the body in "secondary", but i have no idea how to do it. Can you help me? :)

import React from "react";
import { Button, Card } from "react-bootstrap";

const Info = (props) => {
  return (
    <Card border="primary" style={{ width: "18rem" }}>
      <Card.Header> Header </Card.Header>
      <Card.Body >
          Some text
      </Card.Body>
    </Card>
  );
};
export default Info;