React에서 bootstrap/bulma css사용하기

리액트에 부트스트랩이나 벌마 패키지를 설치해 사용해볼 수 있다.

 

 

부트스트랩

yarn add bootstrap
or
npm i bootstrap

최상단(index/App.js) 파일에 import

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

 

벌마

yarn add bulma
or
npm i --save react-bulma-components

동일하게 최상단 파일에 import

import 'bulma/css/bulma.css'

 

컴포넌트 코드

function Test(){
    return(
        <>
            <section class="hero is-warning">
                <div class="hero-body">
                    <p class="title">
                    Warning hero  --  BULMA
                    </p>
                    <p class="subtitle">
                    Warning subtitle
                    </p>
                </div>
            </section>
            <h1>buttons for bootstrap</h1>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
        </>
    )
}

export default Test

 

 

 

스타일이 잘 적용된 것을 볼 수 있다.

 

 

혹시라도 리액트 부트스트랩은 사용을 원한다면 아래와 같다.

React컴포넌트

bulma
yarn add -E react-bulma-components // npm install react-bulma-components

bootstrap
yarn add react-bootstrap  // npm install react-bootstrap bootstrap

이후에는 해당 사이트들의 코드를 복사해서 사용하면 된다.

 

 

CSS

https://getbootstrap.com/docs/5.2/components/buttons/

Buttons

https://bulma.io/documentation/layout/hero/

Bulma: Free, open source, and modern CSS framework based on Flexbox

 

 

REACT (부트스트랩/벌마)

https://react-bootstrap.github.io/components/close-button/

React-Bootstrap

https://couds.github.io/react-bulma-components/?path=/docs/welcome--page 

Storybook