How to Use Bootstrap with React ?

We all know the popularity of React, and how this library has made development tasks easier for frontend developers. React is the most popular front-end library to build the user interface of the application. Industries are slowly reducing the use of jQuery and DOM libraries for building their application.

When it comes to building a responsive app, CSS frameworks are useful in the market. If you work as a front-end developer, then Bootstrap, Foundation, and Bulma kind of framework are not new for you. Most industries use the Bootstrap framework. Millions of websites are running on bootstrap.

Here in this blog, we are going to discuss how to use React and Bootstrap, how to add bootstrap to React app. How to install the React bootstrap package and how to use it in React application. Let’s start with it…

Method to Add Bootstrap to React

There are mainly three ways to add Bootstrap to the React app. We will discuss them one by one.

1. Using Bootstrap CDN.
2. Import Bootstrap in React as a dependency
3. Install React Bootstrap package (such as bootstrap-react or reactstrap).

1. Using Bootstrap CDN

This is one of the easiest ways to use bootstrap in your React app. The best thing about bootstrap CDN is no requirement for installation or downloads. You just need to copy and paste a link in the head section of your app to make it work. Below is the link that you need.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

In case your application needs JavaScript components along with the bootstrap, then at the bottom of the page place <script> tag, just before the closing </body> tag. 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
crossorigin="anonymous"></script>

These snippets will be added to the public/index.html page.

2. Import Bootstrap as a Dependency

You might have used some module bundler or webpack in your application or you might have heard these names. This one is another option to add bootstrap to your React application. You can run the command given below and install bootstrap as a dependency in your application. 

npm install bootstrap

After installation, add this in the JavaScript file of your app’s entry. Below is the index.js file inside the src folder.

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

In the above code at the top line, we have imported Bootstrap minified CSS as the first dependency. With this, we can use Bootstrap classes in our React components. You also need to install jQuery and popper.js along with this. Below is the command to install both of them.

npm install jquery popper.js

Make the changes following below in index.js file to add new dependencies.

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

3. Install React Bootstrap Package

The other method to add bootstrap in your React component is adding a package with the inbuilt bootstrap component. These are designed to work with your React application components. Below is the name of two popular packages.  

• react-bootstrap
• reactstrap

Both are good choices for using Bootstrap with React apps. 

Create React App With Bootstrap

Use the command given below to create a React app in your machine.

create-react-app my-app

Now, run the command given below to install dependencies as given below.

yarn add axios bootstrap reactstrap

Here we have installed Axios as a dependency which is a JavaScript library used to make the HTTP request from node.js or XMLHttpRequests from the browser. Axios allows you to fetch posts from the BaconIpsum JSON API. 

Now to use this Bootstrap minified CSS file. you need to make some modifications in the src/index.js file to include  It will look something as given below…

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Now create a folder component in the src directory of your project. Create a new file Header.js, in it and write the code given below.

import React from 'react';
import logo from '../logo.svg';

import {
  Container, Row, Col, Form, Input, Button, Navbar, Nav,
  NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
  DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';

const Header = () => (
  <header>
    <Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>
    
      <Container>
        <Row noGutters className="position-relative w-100 align-items-center">
        
          <Col className="d-none d-lg-flex justify-content-start">
            <Nav className="mrx-auto" navbar>
            
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">
                  <img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
                </NavLink>
              </NavItem>
              
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Home</NavLink>
              </NavItem>
              
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Electronics</NavLink>
              </NavItem>
              
              <UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
                <DropdownToggle className="font-weight-bold" nav caret>fashion</DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Men</DropdownItem>
                  <DropdownItem>Women</DropdownItem>
                  <DropdownItem>Baby and Kids</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
              
            </Nav>
          </Col>
          
          <Col className="d-flex justify-content-xs-start justify-content-lg-center">
            <NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
              <img src={logo} alt="logo" className="position-relative img-fluid" />
            </NavbarBrand>
          </Col>
          
          <Col className="d-none d-lg-flex justify-content-end">
            <Form inline>
              <Input type="search" className="mr-3" placeholder="Search React Courses" />
              <Button type="submit" color="info" outline>Search</Button>
            </Form>
          </Col>
          
        </Row>
      </Container>
      
    </Navbar>
  </header>
);

export default Header;

In the above code, we have included the navigation menu. Now let’s create a file LeftCard.js file in the component directory with the following content:

import React, { Fragment } from 'react';

import {
  Button, UncontrolledAlert, Card, CardImg, CardBody,
  CardTitle, CardSubtitle, CardText
} from 'reactstrap';

const BANNER = 'https://i.imgur.com/CaKdFMq.jpg';

const LeftCard = () => (
  <Fragment>
  
    <UncontrolledAlert color="danger" className="d-none d-lg-block">
      <strong>Account not activated.</strong>
    </UncontrolledAlert>
    
    <Card>
      <CardImg top width="100%" src={BANNER} alt="banner" />
      <CardBody>
        <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">Lorem Ipsum</CardTitle>
        <CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Lorem Ipsum, Lagos</CardSubtitle>
        <CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book</CardText>
        <Button color="success" className="font-weight-bold">Lorem Ipsum</Button>
      </CardBody>
    </Card>
    
  </Fragment>
);

export default LeftCard;

Now create a file Post.js in the components’ directory and add the snippets given below…

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Badge } from 'reactstrap';

class Post extends Component {

  state = { post: null }
  
  componentDidMount() {
    axios.get('https://baconipsum.com/api/?type=meat-and-filler&paras=4&format=text')
      .then(response => this.setState({ post: response.data }));
  }
  
  render() {
    return (
      <Fragment>
        { this.state.post && <div className="position-relative">
        
          <span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
            Editor's Pick
            <Badge pill color="success" className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle" style={{ fontSize: '0.75rem' }}>New</Badge>
          </span>
          
          <span className="d-block pb-4 h2 text-dark border-bottom border-gray">React Tutorial</span>
          
          <article className="pt-5 text-secondary text-justify" style={{ fontSize: '0.9rem', whiteSpace: 'pre-line' }}>{this.state.post}</article>
          
        </div> }
      </Fragment>
    );
  }
  
}

export default Post;

The above snippet renders the posts on the page. In the above code, the state of the post will be initialized to null. When the React page will render and the component mounts, we fetch the four paragraphs from BaconIpsum JSON API using Axios. After that state will be changed for post property.

Make the final modification in the src/App.js file that looks like given below…

import React, { Fragment } from 'react';
import axios from 'axios';
import { Container, Row, Col } from 'reactstrap';

import Post from './components/Post';
import Header from './components/Header';
import LeftCard from './components/LeftCard';

const App = () => (
  <Fragment>
  
    <Header />
    
    <main className="my-5 py-5">
      <Container className="px-0">
        <Row noGutters className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative">
        
          <Col xs={{ order: 2 }} md={{ size: 4, order: 1 }} tag="aside" className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0">
            <LeftCard />
          </Col>
          
          <Col xs={{ order: 1 }} md={{ size: 7, offset: 1 }} tag="section" className="py-5 mb-5 py-md-0 mb-md-0">
            <Post />
          </Col>
          
        </Row>
      </Container>
    </main>
    
  </Fragment>
);

export default App;

Conclusion

So we have discussed multiple ways to include bootstrap in React app. We have also discussed using the react-bootstrap library. Alert, badge, navbar, dropdown, button, card, nav, form, etc. are the common components of the bootstrap library in React that you will be using frequently. Other useful components are tables, modals, tooltips, carousel, jumbotron, pagination, tabs, etc. React bootstrap is very useful in giving the layout and designing the user interface of your website. Once you will start using it, you will get to know the uses of its components.