Vivek Kumar

Integrating Bootstrap and React – Part 3

Vivek Kumar

May 19, 2019
9 Min read
19 Views

May 19, 2019
9 Min read
19 Views

Web Development

React

Introduction

This guide is the third part of the series Integrating Bootstrap with React. To learn about the basic integration of Bootstrap with React, you can refer to the first guide, Integrating Bootstrap with React - Part 1 and to learn about the third-party library for their integration you can refer to Integrating Bootstrap with React - Part 2.

In this successive guide, you will learn about a few of the Bootstrap style components available in React.

Bootstrap Style Components in React

From the previous guides, you have gotten a sense of working with Reactstrap. Moving-ahead, there are numerous Bootstrap components that can be used along with the React. We shall be exploring them in a separate guide, but here you will get to know a few essential components and their application in the project. For instance, an app of contact list!

1. Navigation Bar

If you are looking for navigation bar components that are responsive, then you may count on Reactstrap Navigation Bars. Sub-components are also possible in a Navbar like Navltem, NavbarBrand, and Nav, etc. for the sake of making the organization of navigation links in a proper manner.

A <Navbar Toggler> can be included inside the component of <Navbar>, so as to see the NavBar is responsive. Thereafter, you can wrap the <Navklterms> in the component of <Collapse>.

The code given below depicts how React State and the component of Navbar can be used for the storage of toggle data.

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
export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color = "faded" light expand = "md">
            {/* Brandname */}
               <NavbarBrand href = "/">
                Demo
            </NavbarBrand>
               {/* Add toggler to auto-collapse */}
          <NavbarToggler onClick = {this.toggle} />
          <Collapse isOpen = {this.state.isOpen} navbar>

              {/*Pull left */}
            <Nav className = "ml-auto" navbar>
                <NavItem>
                    <NavLink href = "/link/">
                        Left Nav Link
                    </NavLink>
                </NavItem>
            </Nav>

            {/* Pull right */}
            <Nav className = "mr-auto" navbar>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Bob
                </DropdownToggle>

                <DropdownMenu >
                  <DropdownItem>
                    Account
                  </DropdownItem>
                  <DropdownItem>
                    Settings
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Logout
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

javascript

2. Modal Window

This component of the Reactstrap modal helps in creating the modal of Bootstrap, taking in use of the body, header, and footer.

Callbacks, and some props, are accepted by the modal in order to add interactive features to the window and, in addition, to making it closable.

The visibility of the modal is dependent on the isOpen prop. When it comes to the component for controlling, the togglecallback is used, so as to toggle the isOpen’s value.

Transition effects are added with the help of various other props. If you talk about the callbacks, they are onClosed, OnEnter, onOpened and onExit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{/*For the modal to open, this.state.show should become true which is usually triggered by an onClick event */}
{/* toggleModal would set state of show to false onClose*/}

<Modal isOpen = {this.state.show} toggle = {this.toggleModal} >

    <ModalHeader toggle = {this.toggle} >
        Modal title
    </ModalHeader >

    <ModalBody >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nii ut af ex ea commodo consequat.
    </ModalBody >

    <ModalFooter >
        <Button color = "primary" onClick = {this.toggle} > Do Something </Button >{' '}
        <Button color="secondary" onClick = {this.toggle}> Cancel </Button >
     </ModalFooter >
</Modal >

javascript

3. Forms

As far as the Reactstrap <Form> is concerned, it could be horizontal or inline.

For rendering an <input> element, the input component is taken in use. Numerous input components can be wrapped for features like accessing the features of FormGroup, ensuring state validation, and ensuring proper space into a FormGroup.

You should try setting labels by making use of <Label>, as it is indeed a good option. If you wish to learn more about forms, then it’s better to go for its Bootstrap documentation.

The code for the same is given below:

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
 <Form >
   <FormGroup row >
      <Label for = "exampleEmail" sm = {2} > Email </Label >
      <Col sm = {10} >
          <Input type = "email" name = "email" id = "exampleEmail" placeholder = "with a placeholder" />
      </Col >
   </FormGroup >

   <FormGroup row >
      <Label for = "examplePassword" sm = {2} > Password </Label >
      <Col sm = {10} >
         <Input type = "password" name = "password" id = "examplePassword" placeholder = "password placeholder" />
      </Col >
   </FormGroup >

   <FormGroup row >
      <Label for = "exampleSelect" sm = {2} >Select </Label >
      <Col sm = {10} >
          <Input type = "select" name = "select" id = "exampleSelect" />
      </Col >
   </FormGroup >

   <FormGroup row >
      <Label for = "exampleSelectMulti" sm = {2} > Select Multiple </Label >
      <Col sm = {10} >
        <Input type = "select" name = "selectMulti" id = "exampleSelectMulti" multiple />
      </Col >
    </FormGroup >

  <FormGroup row >
    <Label for = "exampleText" sm = {2} >Text Area </Label >
    <Col sm = {10} >
      <Input type = "textarea" name = "text" id = "exampleText" />
    </Col >
  </FormGroup >
</Form >

javascript

4. ListGroup

If you want to control or style React’s list items, then you can make use of the ListGrop of Reactstrap that helps in simplifying the process. The ListGroup again results in wrapping the ListGroupItems, so as to make them interactive with the help of onClick callback.

The Code for the same is as below:

1
2
3
4
5
<ListGroup >
  <ListGroupItem > Item 1 </ListGroupItem >
  <ListGroupItem > Item 2 </ListGroupItem >
  <ListGroupItem > ... </ListGroupItem >
</ListGroup >;

javascript

5. Buttons

For any kind of designing framework, buttons constitute an important part. You have the component of Reactstrap <Button> for the buttons. Besides the disabled and active properties, developers can make use of size and color in order to fix the style of button.

1
2
3
4
5
6
7
8
9
10
{/*ButtonToolbar helps to organize buttons */}
 <div>
    <Button color="primary">primary</Button>{' '}
    <Button color="secondary">secondary</Button>{' '}
    <Button color="success">success</Button>{' '}
    <Button color="info">info</Button>{' '}
    <Button color="warning">warning</Button>{' '}
    <Button color="danger">danger</Button>{' '}
    <Button color="link">link</Button>
 </div>

javascript

Demo: Application UI Contact List with Reactstrap

Let’s have a look at a demo prepared by making use of the components that are mentioned in the first and the second guides in this series.

You should try to complete experiment on it, to make yourself acquainted with the concept of Reactstrap:

1
2
3
4
5
6
import React from "react";
import { render } from "react-dom";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.css';

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

javascript

Here's the sample output. To get the complete code along with directory structure, you can refer to the given resource.

Conclusion

In this guide, you have learned about a few of the available components in Reactstrap library, ending the guide with a contact list demo.

To revise the previous concepts, you can visit the previous guides of this series:

Integrating React and Bootstrap - Part 1

Integrating React and Bootstrap - Part 2

Reference

While writing this guide, the below-mentioned articles have been used for reference:

Integrating Bootstrap with React: a Guide for Developers Demo resource 1 Demo resource 2

Test your skills. Learn something new. Get help. Repeat.

Start a FREE 10-day trial