Integrating Bootstrap with React: a Guide for Developers

Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components.

In this tutorial, we’re going to:

explore tools and techniques for building a user interface with Bootstrap’s look and feel for a React-powered web application
use reactstrap to build a React contact list application.

React is one of the most popular JavaScript technologies for interactive web applications. Its popularity derives from its component-based modular approach, composability and fast re-rendering algorithm.

However, being a view library, React doesn’t have any built-in mechanism that can help us create designs that are responsive, sleek and intuitive. That’s where a front-end design framework like Bootstrap steps in.

Why You Can’t Just Include Bootstrap Components with React

Combining Bootstrap with React isn’t as easy as adding <link rel="stylesheet" /> to an index.html file. This is because Bootstrap depends on jQuery for powering certain UI components. jQuery uses a direct DOM manipulation approach that’s contradictory to React’s declarative approach.

If we need Bootstrap just for the responsive 12 column grid, or the components that don’t use jQuery, we can simply resort to the vanilla Bootstrap stylesheet. Otherwise, there are many libraries that take care of bridging the gap between React and Bootstrap. We’ll compare both methods so that we’ll be in a better position to choose the approach that works for our specific case.

Let’s get started!

Setting up a Bootstrap Stylesheet with React

Let’s use the Create React App CLI to create a React project, which requires zero configuration to get started.

We install Create React App and run the following command to start a new project and serve the development build:

$ create-react-app react-and-bootstrap
$ cd react-and-bootstrap
$ npm start

Here’s the directory structure created by Create React App:

.
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

Next, let’s download the latest version of the Bootstrap library from Bootstrap’s official site. The package includes both the compiled and minified versions of the CSS and JavaScript. We’ll just copy the CSS and place it inside the public/ directory. For projects that just need the grid, there is a grid-specific stylesheet included too.

Next, we create a new directory for css inside public/, paste bootstrap.min.css in our newly created css directory, and link it from public/index.html:

<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

Alternatively, we can use a CDN to fetch the minified CSS:

<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Let’s have a look at what works and what doesn’t with this setup.

Using Vanilla Bootstrap with React

Once we add the Bootstrap stylesheet to a React project, we can use the regular Bootstrap classes inside JSX code. Let’s head over to the Bootstrap demo site and copy over some random example code, just to check everything is working as it should:

As we can see, the form looks good, but the NavBar doesn’t. That’s because the NavBar depends on the Collapse jQuery plugin, which we haven’t imported. Apart from being unable to toggle navigation links, we can’t use features like dropdown menus, closable alerts and modal windows, to name a few.

Wouldn’t it be awesome if we could import Bootstrap as React components to make the most out of React? For instance, imagine if we could use a combination of Grid, Row and Column components to organize the page instead of the pesky HTML classes:

<!-- Bootstrap with HTML classes -->

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

<!-- Bootstrap with React Components -->

<Grid>
  <Row>
      <Col sm>
        One of three columns
    </Col>
    <Col sm>
        One of three columns
    </Col>
     <Col sm>
        One of three columns
    </Col>
  </Row>
</Grid>

Fortunately, we don’t have to implement our own library to serve this purpose, as there are some popular solutions already available. Let’s take a look at some of them.

An Overview of Third-party Libraries for React and Bootstrap

There are a few libraries that try to create a React-specific implementation of Bootstrap so that we can use JSX components while working with Bootstrap styles. I’ve compiled a list of a few popular Bootstrap modules that we can use with our React projects.

React-Bootstrap is by far one of the most popular libraries for adding Bootstrap components into React. However, at the time of writing this tutorial, it targets Bootstrap v3 and not the latest version of Bootstrap. It’s in active development and the API might break when a newer version is released.

reactstrap is another library that gives us the ability to use Bootstrap components in React. Unlike React-Bootstrap, reactstrap is built for the latest version of Bootstrap. The module includes components for typography, icons, forms, buttons, tables, layout grids, and navigation. It’s also in active development and it’s a nice alternative for building React-powered Bootstrap apps.

There are a few other libraries like React-UI, and domain-specific modules like React-bootstrap-table and CoreUI-React Admin Panel on GitHub, which provide extended support for creating awesome UIs using React.

The rest of this tutorial will focus on reactstrap, because it’s the only popular module that uses the latest version of Bootstrap.

Setting up the reactstrap Library

We start by installing the reactstrap library using npm:

npm install --save reactstrap@next

Now we can import the relevant components from the module as follows:

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

However, the library won’t work as we might expect it to yet. As explained on the reactstrap website, the reason for this is that reactstrap doesn’t include Bootstrap CSS, so we need to add it ourselves:

npm install --save bootstrap

Next, we import Bootstrap CSS in the src/index.js file:

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

Bootstrap Grid Basics

Bootstrap has a responsive, mobile first and fluid grid system that allows up to 12 columns per page. To use the grid, we’ll need to import the Container, Row and Col components.

The Container accepts a fluid property that converts a fixed-width layout into a full-width layout. Essentially, it adds the corresponding .container-fluid Bootstrap class to the grid.

As for <Col>s, we can configure them to accept props such as xs, md, sm and lg that are equivalent to Bootstrap’s col-* classes — for exmple, <Col xs="6"> </Col>

Alternatively, we can pass an object to the props with optional properties like size, order and offset. The size property describes the number of columns, whereas order lets us order the columns and accepts a value from 1 to 12. The offset property moves the columns to the right.

The code below demonstrates some of the Grid features in reactstrap:

Bootstrap Style Components in React

Now that we have reactstrap at our fingertips, there are tons of Bootstrap 4 components that we can use with React. Covering them all is beyond the scope of this tutorial, but let’s try a few important components and use them in an actual project — say, a contact list app.

Navigation Bar

reactstrap Navbars are responsive navigation bar components. A Navbar can have subcomponents like NavbarBrand, Nav, NavItem, etc. for better organizing navigation links.

To make the NavBar responsive, we can include a <NavbarToggler> inside our <Navbar> component and then wrap <NavItems> into a <Collapse> component.

Take a look at the code below, which shows how we can use the Navbar component and React state to store the toggle data:

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>
    );
  }
}

Modal Window

The reactstrap Modal component creates a Bootstrap Modal with a header, a body, and a footer.

A modal component accepts a few props and callbacks to make the window interactive and closable.

The isOpen prop determines whether the modal should be visible. The toggle callback can be used to toggle the value of isOpen in the controlling component.

There are additional props for adding transition effects. The callbacks available include onEnter, onExit, onOpened, and onClosed:

{/*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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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>

Forms

A reactstrap <Form> can be either inline or horizontal.

An Input component renders an <input> element. We can wrap multiple Input components into a FormGroup for state validation, proper spacing, and to access other FormGroup features.

It’s always a good idea to set a label using <Label>. There’s a lot more to forms, and you should check out the Bootstrap documentation on Forms.

Here’s the code for our reactstrap form:

 <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>

ListGroup

The reactstrap ListGroup makes it easier to style and control list items in React. The ListGroup wraps ListGroupItems, which can be made interactive using the onClick callback.

Here’s what the code looks like:

<ListGroup>
  <ListGroupItem>Item 1</ListGroupItem>
  <ListGroupItem>Item 2</ListGroupItem>
  <ListGroupItem>...</ListGroupItem>
</ListGroup>;

Buttons

Buttons are an integral part of any design framework. For buttons, there’s a reactstrap <Button> component. Apart from the active and disabled properties, we can use color and size to set the button’s style (primary, success, etc.) and size (‘lg’, ‘sm’, etc.):

{/*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>

Demo: A Contact List Application UI with reactstrap

Here’s a sample demo built using the components discussed in this tutorial.

Check it out and experiment with it to familiarize yourself with reactstrap:

Summary

We’ve now covered everything you need to know to make the best of Bootstrap with React.

There’s no shortage of libraries for integrating Bootstrap with React, and we’ve looked at some of the most popular options. We also explored a popular library called reactstrap. If you’re ever in doubt, don’t forget to check the documentation page to know more about the available components.

So, what are your thoughts about building responsive UIs using Bootstrap with React? If you have any suggestions about Bootstrap in general or a particular library that you’ve found useful, please feel free to share it through the comments.

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

FAQs on Integrating Bootstrap with React

What is Bootstrap, and why would I want to integrate it with React?

Bootstrap is a popular CSS framework that provides pre-designed UI components and styling. Integrating it with React allows you to create responsive and visually appealing web applications more quickly.

How do I integrate Bootstrap with a React project?

You can integrate Bootstrap into your React project by including the Bootstrap CSS files and, if needed, JavaScript files in your project, typically via npm or by linking to a Content Delivery Network (CDN).

Which version of Bootstrap should I use with React?

You can use Bootstrap 4 or Bootstrap 5 with React. The version you choose depends on your project requirements and compatibility.

Should I use React Bootstrap or the standard Bootstrap library with React?

React Bootstrap is a library that provides Bootstrap components as React components. You can use it for easier integration and access to Bootstrap features as React components, or you can use the standard Bootstrap library alongside React.

Are there any specific considerations for integrating Bootstrap with Create React App (CRA)?

If you’re using Create React App, you can simply include Bootstrap CSS in your src/index.js or another entry point, as mentioned earlier. CRA handles most of the configuration for you.

Can I use Bootstrap’s JavaScript components with React?

Yes, you can use Bootstrap’s JavaScript components with React, but it’s recommended to use React alternatives or libraries like React Bootstrap when possible for better integration.