Using Bootstrap 4 with React
Tags: javascript, react, bootstrap
Published: 2018-04-19 20:06:53

---
title: "Using Bootstrap 4 with React"
published: true
tags: javascript, react, bootstrap
canonical_url: https://www.techiediaries.com/react-bootstrap/
---

Bootstrap 4 is the most popular CSS framework for building responsive layouts with many new features such as the support for Flexbox and a new Card component.

Bootstrap 4 depends on both jQuery and Popper.js but using jQuery with React is not recommended since jQuery uses direct DOM manipulation.

If you need to add to add Bootstrap 4 styling to your React app the community has created some packages for making it possibly to use Bootstrap 4 without jQuery but still be able to use the complete features and components of BS 4.

In this tutorial we'll see how to use Reactstrap

So head back to your terminal and navigate inside your React project the run the following command to install bootstrap and reactstrap

```
npm install --save bootstrap reactstrap@next
```

We need to install bootstrap because _reactstrap_ requires the Bootstrap 4 CSS files

Import Bootstrap CSS in the `src/index.js` file using:

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

You can also use a `<link>` tag in your project `index.html` file.

You can then import individual Bootstrap 4 components and use them.

Open `src/App.js` then add the following [example](https://gist.github.com/eddywashere/e13033c0e655ab7cda995f8bc77ce40d):

```
import React, { Component } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container,
  Row,
  Col,
  Jumbotron,
  Button
} from 'reactstrap';
class App extends 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="inverse" inverse toggleable>
          <NavbarToggler right onClick={this.toggle} />
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <Jumbotron>
          <Container>
            <Row>
              <Col>
                <h1>Welcome to React</h1>
                <p>
                  <Button
                    tag="a"
                    color="success"
                    size="large"
                    href="http://reactstrap.github.io"
                    target="_blank"
                  >
                    View Reactstrap Docs
                  </Button>
                </p>
              </Col>
            </Row>
          </Container>
        </Jumbotron>
      </div>
    );
  }
}

export default App;
```

If are unable to import the Bootstrap CSS file inside your React app you can check this [StackOverflow solution](https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles/42440360)

https://upscri.be/wvwuxi