[React] Boot Strap 사용하기

1. react-bootstrap 설치하기

 

- 터미널에 npm install react-bootstap 입력

npm install react-bootstrap

 

 

2. import 해주기

 

- src - index.js에 import 하기

import 'bootstrap/dist/css/bootstrap.min.css';

 

3. 사용할 Components import 해서 사용하기

 

- example

import Card from 'react-bootstrap/Card';

- example 전체코드

import React from 'react';
import Card from 'react-bootstrap/Card';

const Home =() =>{

    return (
    	<div>
            <Card style={{ width: '18rem' }}>
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
                <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.Link href="#">Card Link</Card.Link>
                <Card.Link href="#">Another Link</Card.Link>
              </Card.Body>
            </Card>
		</div>
        );
}
export default Home;

성공

 

참고사이트

https://getbootstrap.com/docs/5.3/getting-started/introduction/