React Bootstrap 사용

React Bootstrap 이란?

Bootstrap을 React에서 사용하는 것으로, HTML요소를 디자인하기 간편하도록 해준다.

---

설치

// Bootstrap을 사용하려는 프로젝트 폴더에서 실행
> npm install react-bootstrap bootstrap

---

React 프로젝트에 적용

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

1.App.js에 적용

- App.js에 아래와 같이 import 해준다.

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

 

2.index.html에 적용

- index.html에 아래 내용을 import 해준다.

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

---

Navbar 적용해보기

https://react-bootstrap.netlify.app/components/navbar/#rb-docs-content

빨간색 영역

Navbar 사용을 위해 각 필요한 항목은 import 해줌