본문 바로가기

react

[react] bootstrap 설치 사용

반응형

1.

react-bootstrap.github.io/getting-started/introduction

 

React-Bootstrap

The most popular front-end framework, rebuilt for React.

react-bootstrap.github.io

2. 

VSC 터미널에 입력

npm install react-bootstrap bootstrap

또는

yarn add react-bootstrap bootstrap

 

3.

사이트에 있는 것 복사

더보기
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

4. index.html 에 붙혀넣기

 

5. getbootstrap.com/docs/5.0/components/buttons/ 사이트에서 예시를 가져온다

<button type="button" class="btn btn-success">Success</button>

 

6. App.js 에서 div 사이에 부트스트랩 을 넣는다

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <button type="button" class="btn btn-success">Success</button>
    </div>
  );
}

export default App;

7. npm start 하여 화면 확인

 

반응형

'react' 카테고리의 다른 글

[react] bootstrap 사용 (navbar)  (0) 2021.05.11
[react] npm start, yarn start  (0) 2021.05.11
[react] yarn 설치 mac os  (0) 2021.05.10
[react] input 태그 (onChange, onInput)  (0) 2021.05.09
[react] 부모에서 자식 Component 값 전달  (0) 2021.05.07