# 리액트 Bootstrap 사용하기

HTML에서도 Bootstrap을 사용할 수 있었듯이, 리액트에서도 사용할 수 있다.

 

아래 링크로 가서, 원하는 리액트 프로젝트 파일을 열고

https://react-bootstrap.netlify.app/getting-started/introduction

React-Bootstrap

 

 

터미널에 아래와 같은 코드를 입력해주면 된다.

npm install react-bootstrap bootstrap

 

 

1) 다음으로는 App.js 파일에 아래 코드를 임포트해서 넣거나,

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

 

 

2) index.html 파일의 head태그 안에 아래 코드를 복붙해서 넣으면 된다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>

 

 

 

● 부스트랩 적용방법

 

•  원하는 적용 스타일을 찾는다. 예시로 button을 검색해보았고, 버튼중에서 primary 버튼을 적용하려고 한다고 가정해보자.

 

•  Primary 서식 코드를 복사해서 app.js에 넣어준다. 그 다음, Button를 임포트한다는 코드를 맨위에 적어주어야한다