Wonderful react-bootstrap! We can use Bootstrap as a component!

React-Bootstrap is a library that can handle Bootstrap as a component of React.js.
By using this you can build code with a sense of combining React.js components, not Bootstrap’s CSS.
Also, as a whole your code becomes clearer, maintenance costs are suppressed as well!


Merit

  • A Whole code becomes clearer
  • We don’t need to remember Bootstrap CSS. We just build by React component.
  • When combining JS such as Modal can also be treated as a component

Installation

The following code is the library istallation command:

1
$ npm install react-bootstrap --save

Load CSS

[React-Bootstrap] (https://react-bootstrap.github.io) does not include Bootstrap CSS, so we need to load CSS by yourself.
In my opinion, it is better to load CSS yourself because we can use our favorite theme. Also we can manage the CSS by npm.

1
2
3
4
5
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

Usage

A usual Bootstrap navigation bar will be the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// components/NavigationSample.jsx
import React from 'react';
export NavigationSample class extends React.Component {
render () {
return (
<Grid>
<Row className="show-grid">
<Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
<Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
<Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
</Row>
</Grid>
);
}

Layout

For example, above layout will be following codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// components/LayoutSample.jsx
import React from 'react';
export LayoutSample class extends React.Component {
render () {
return (
<Grid>
<Row className="show-grid">
<Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
<Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
<Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
</Row>
<Row className="show-grid">
<Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
<Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
</Row>
</Grid>
);
}

Correspondence between Grid, Row Col and Bootstrap CSS

  • <Col xs={12} md={4}> => <div class="col-md-4 col-xs-12">
  • <Row> => <div class="row">
  • <Grid> => <div class="container">
  • <Button> => <button type="button" class="btn">

Happy Hacking!

Special Thanks