리액트에 부트스트랩 적용하기

부트스트랩에 있는 대문자를 전부 import해와야 한다.

// 아래와 같이 
import { Container, Navbar, Nav, NavDropdown, Button } from "react-bootstrap";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">
                  Another action
                </NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">
                  Something
                </NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">
                  Separated link
                </NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
...    
...

<div className="container">
        <div className="row">
    // row와 column을 쪼개는 방법은 React-bootstrap에 똑같이 다 있다.
          <div className="col-md-4">
            <img
              src="주소는 어쩌구 저쩌구"
              width="100%"
            />
            <h4>가나다라</h4>
            <p>마바사아자</p>
          </div>

기존 bootstrap을 함께 사용할 수도 있다.
React-bootstrap 사이트에서 CSS에 있는, 앞선 글에 있는 부분도 같이
index.html에 복붙해주면 적용 잘 된다.