1
npm install react-bootstrap bootstrap

1
// Webpack CSS import
2
// import 'onsenui/css/onsenui.css';
3
// import 'onsenui/css/onsen-css-components.css';
4
// import OnesenUIExample from './components/OnsenUI/OnesenUIExample';
5
// import AntDesignExample from './components/AntDesign/AntDesignExample';
6
// import 'semantic-ui-css/semantic.min.css';
7
// import ReactSemanticUIExample from './components/ReactSemanticUI/ReactSemanticUIExample';
8

9
import 'bootstrap/dist/css/bootstrap.min.css'
10
import ReactBootstrapExample from './components/ReactBootstrap/ReactBootstrapExample'
11

12
export default function App() {
13
  return (
14
    <>
15
      <ReactBootstrapExample />
16
      {/* <ReactSemanticUIExample /> */}
17
      {/* <AntDesignExample /> */}
18
      {/* <OnesenUIExample /> */}
19
    </>
20
  )
21
}

1
import React, { useState } from 'react'
2
import { Alert, Button } from 'react-bootstrap'
3

4
export default function AlertDismissible() {
5
  const [show, setShow] = useState(false)
6

7
  return (
8
    <>
9
      <Alert show={show} variant="success">
10
        <Alert.Heading>How's it going?!</Alert.Heading>
11
        <p>
12
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
13
          consectetur purus sit amet fermentum.
14
        </p>
15
        <hr />
16
        <div className="d-flex justify-content-end">
17
          <Button onClick={() => setShow(false)} variant="outline-success">
18
            Close me y'all!
19
          </Button>
20
        </div>
21
      </Alert>
22

23
      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
24
    </>
25
  )
26
}

1
import React from 'react'
2
import AlertDismissible from './AlertDismissible'
3

4
export default function ReactBootstrapExample() {
5
  return (
6
    <div>
7
      <AlertDismissible />
8
    </div>
9
  )
10
}

1
/* grid.css */
2
.col-color {
3
  border: 1px solid red;
4
  background-color: pink;
5
}

1
import { Container, Row, Col } from 'react-bootstrap'
2
import './grid.css'
3

4
export default function GridExample() {
5
  return (
6
    <Container>
7
      {/* Stack the columns on mobile by making one full-width and the other half-width */}
8
      <Row>
9
        <Col xs={12} md={8} className="col-color">
10
          xs=12 md=8
11
        </Col>
12
        <Col className="col-color" xs={6} md={4}>
13
          xs=6 md=4
14
        </Col>
15
      </Row>
16

17
      {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
18
      <Row>
19
        <Col className="col-color" xs={6} md={4}>
20
          xs=6 md=4
21
        </Col>
22
        <Col className="col-color" xs={6} md={4}>
23
          xs=6 md=4
24
        </Col>
25
        <Col className="col-color" xs={6} md={4}>
26
          xs=6 md=4
27
        </Col>
28
      </Row>
29

30
      {/* Columns are always 50% wide, on mobile and desktop */}
31
      <Row>
32
        <Col className="col-color" xs={6}>
33
          xs=6
34
        </Col>
35
        <Col className="col-color" xs={6}>
36
          xs=6
37
        </Col>
38
      </Row>
39
    </Container>
40
  )
41
}
42
import AlertDismissible from './AlertDismissible'
43
import GridExample from './GridExample'
44

45
export default function ReactBootstrapExample() {
46
  return (
47
    <div>
48
      <GridExample />
49
      <AlertDismissible />
50
    </div>
51
  )
52
}

1
import { Button, ButtonGroup } from 'react-bootstrap'
2

3
export default function ButtonExample() {
4
  return (
5
    <>
6
      <ButtonGroup size="lg" className="mb-2">
7
        <Button>Left</Button>
8
        <Button>Middle</Button>
9
        <Button>Right</Button>
10
      </ButtonGroup>
11

12
      <ButtonGroup className="mb-2">
13
        <Button>Left</Button>
14
        <Button>Middle</Button>
15
        <Button>Right</Button>
16
      </ButtonGroup>
17

18
      <ButtonGroup size="sm">
19
        <Button>Left</Button>
20
        <Button>Middle</Button>
21
        <Button>Right</Button>
22
      </ButtonGroup>
23
    </>
24
  )
25
}