react bootstrap profile card

To create a profile card using React Bootstrap, you can follow these steps:

1. Install React Bootstrap by running the following command in your project directory:

npm install react-bootstrap bootstrap

1. Import the necessary components from React Bootstrap in your React component file:

import { Card } from 'react-bootstrap';

1. Create a functional component for your profile card:

function ProfileCard() {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="profile-picture.jpg" />
      <Card.Body>
        <Card.Title>John Doe</Card.Title>
        <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Card.Text>
      </Card.Body>
    </Card>
  );
}

1. Export the component so that it can be used in other parts of your application:

export default ProfileCard;

1. Use the ProfileCard component in your desired location within your application:

import ProfileCard from './ProfileCard';

function App() {
  return (
    <div>
      <ProfileCard />
    </div>
  );
}

export default App;

By following these steps, you should be able to create a profile card using React Bootstrap. Make sure to replace the src attribute of the Card.Img component with the URL or path to your desired profile picture.