Author avatar

Vivek Kumar

Integrating Bootstrap and React – Part 2

Vivek Kumar

  • May 19, 2019
  • 7 Min read
  • 23 Views
  • May 19, 2019
  • 7 Min read
  • 23 Views
Web Development
React

Introduction

This guide is the second part of the series Integrating Bootstrap with React. To learn about the basic integration of Bootstrap with React, you can refer the first guide, Integrating Bootstrap with React - Part 1.

In this successive guide, you will learn about the third-party libraries for React and Bootstrap with emphasis on grids.

The Baseline

In order to create a Bootstrap implementation that is React specific, there are some libraries available that allow the use of the components of JSX with the styles of Bootstrap. In this guide, we will discuss some of the modules of Bootstrap that can be used with the projects based on React.

If we talk about the libraries that are considered popular for adding the components of Bootstrap into the React, then React-Bootstrap has its own position. Please note, however, here Bootstrap v3 is targeted instead of the Bootstrap’s new, or the most advanced, version.

For using the components of Bootstrap in React, there’s another library by the name of Reactstrap. Though React-Bootstrap is not built for supporting the Bootstrap’s latest version, that is not the case with Reactstrap. You can easily find the typography components, layout grids, buttons, forms, icons, and tables in the module. Since it is in the development phase and it is a good alternative for preparing the Bootstrap apps that are based on React, you can find it getting more popular day by day.

If you wish to get extended support for the creation of React based UIs then you may opt for a number of libraries, for example React UI, and the modules that are specific to the domain. For instance, tables based on React Bootstrap, React UI, and React Admin Panel based on CoreUI available on the GitHub.

The remaining part of this guide is going to focus on Reactstrap because it is fully compatible with the Bootstrap’s latest version.

Setting up the Library on Reactstrap

Initially, you need to do the installation of the Reactstrap library, taking in use of npm. We start by installing the reactstrap library using npm:

1
npm install --save [email protected]
sh

Once done, you need to import all the components that are relevant to the module itself. Here’s the code for that:

1
import { Container, Row, Col} from 'reactstrap';
javascript

But, if you think this will make the library work, then you are wrong. The reason for the same is already given on the official website of the Reactstrap. It simply says, Bootstrap CSS is not included in the Reactstrap and that’s why we need to do the same manually.

1
npm install --save bootstrap
sh

Once done, the Bootstrap CSS needs to be imported in the file of the src/index.js:

1
import 'bootstrap/dist/css/bootstrap.css';
javascript

The Basics of Bootstrap Grid

An important feature of Bootstrap is that it has mobile-first responsive design, as well as a fluid grid system, with the help of which, you can create as many as 12 columns for every page. The container is required to be imported along with the Col components and Row, so as to make use of the grid.

A fluid property that leads to the conversion of the layout of fixed width into the full one is accepted by the container. Importantly, it results in the addition of the Bootstrap class with .container-fluid to the grid.

<Col>s need to be configured to allow props like lg, md, xs and sm, which are actually equal too the col-* classes of Bootstrap. For instance, <Col xs="6"> </Col>.

If you don’t wish to use the above, then you can try passing the object with a number of optional properties to the props, like offset, size, and order. The columns’ number is described by the size property, whereas the columns’ order is ascertained by order and even helps in choosing one value from 1-12. If you wish the columns to move correctly, then this role is entrusted to the offset property.

Here’s the code showing few of the Reactstrap’s Grid features.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React, { Component } from "react";
import { render } from "react-dom";
import { Container, Row, Col } from "reactstrap";

import "./App.css";

import "bootstrap/dist/css/bootstrap.css";

class App extends Component {
  render() {
    return (
      <div >
        <Container >
          <Row >
            <Col >
              <Box > .col </Box >
            </Col >
          </Row >

          <Row>
            <Col xs = "6">
              <Box> .col-6 </Box>
            </Col>

            <Col xs = "6">
              <Box> .col-6 </Box>
            </Col>
          </Row>

          <Row>
            <Col xs = "4">
              <Box> .col-4 </Box>
            </Col>

            <Col xs = "4">
              <Box> .col-4 </Box>
            </Col>

            <Col xs = "4">
              <Box> .col-4 </Box>
            </Col>
          </Row>

          <Row>
            <Col>
              <Box> .col </Box>
            </Col>

            <Col>
              <Box> .col </Box>
            </Col>

            <Col>
              <Box> .col </Box>
            </Col>

            <Col>
              <Box> .col </Box>
            </Col>
          </Row>

          <Row>
            <Col xs = "3">
              <Box> .col-3 </Box>
            </Col>

            <Col xs = "auto">
              <Box> .col-auto with variable content</Box>
            </Col>

            <Col xs = "3">
              <Box> .col-3 </Box>
            </Col>
          </Row>

          <Row>
            <Col sm = {{ size: 6, order: 2, offset: 1 }}>
              <Box> .col-sm-6 .col-sm-order-2 .col-sm-offset-2 </Box>{" "}
            </Col>
          </Row>
          <Row>
            <Col sm = "12" md = {{ size: 8, offset: 2 }}>
              <Box> .col-sm-12 .col-md-6 .col-md-offset-3 </Box>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default App;

const Box = props => <div className = "box" > {props.children} </div>;

render(<App />, document.getElementById("root"));
javascript

cols

Conclusion

In this guide, you have learned about the basics of Reactstrap library with an example of a Bootstrap grid.

The current guide is in series with the following guides:

Reference

While writing this guide, the below resources article has been used for reference:

0