Open In App

Difference between reactstrap and react-bootstrap

Last Updated : 25 Oct, 2020
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap is a popular front-end CSS framework used by web developers to design their web applications. Bootstrap components include HTML, CSS, and JavaScript with additional dependencies like jQuery which makes it hard to use in React applications. There are two libraries available which are reactstrap and react-bootstrap that help us overcome this problem. Both libraries have a similar approach to Bootstrap components. However, there exists minor differences between the two libraries that make one preferable over the other as per the requirements.

Let us see a comparison between the two:

PARAMETER REACT-BOOTSTRAP REACTSTRAP
CreatedDec 28, 2013Feb 19, 2016
DescriptionReact-Bootstrap is Bootstrap 4 components built with ReactReactstrap is stateless React Bootstrap 4 components
Last UpdatedOct 19, 2020Oct 17, 2020
LicensesMITMIT
Versions155200
Dependenciesprovides own implementation for animations and positioning. depends on react-transition group and react-popper for animations and positioning of popups.
ExclusionNo more dependencies on Javascript and jqueryIt does not include Bootstrap CSS and is not dependent on Javascript or jquery
Stars18, 4569594
Open issues117224
DownloadsMore number of downloadsLesser number of downloads
Installationnpm install react-bootstrapnpm install reactstrap
Uninstallnpm uninstall react-bootstrapnpm uninstall reactstrap

React-Bootstrap:

The following are the steps to create a simple react-bootstrap application

npm install -g create-react-app
create-react-app my_app
cd my_app/
npm start

Open the application at "http://localhost:3000/" 

Adding Bootstrap:

npm install react-bootstrap bootstrap

In the "myapp" directory, there is an "src" folder that has "index.js" and "App.js" files which are of our interest. Write the following code in each file as follows and view the app at http://localhost:3000/

App.js file: The "App.js" file has the following code.

JavaScript
// Importing individual react components
import React from 'react';

import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';

// App function is created which contains the html
// code that is displayed in the webpage
const App = () => (
  <Container className="p-3">
    <Jumbotron>
      <h1 className="header">Welcome To React-Bootstrap</h1>
      <Button variant="danger">Click here</Button>
    </Jumbotron>
  </Container>
);

export default App;

index.js: The "index.js" file has the following code.

JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

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

// For faster loading and working of app,
// you can change unregister() to register()
// below. Note this comes with some pitfalls.
// Learn more about service workers: 
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

Output:

Reactstrap:

The following are the steps to create a simple reactstrap application

npm install -g create-react-app
create-react-app myapp
cd myapp/
npm start

Open "http://localhost:3000/" to see your app.

Adding Bootstrap:

npm i bootstrap
npm i reactstrap react react-dom

In the "myapp" directory, there is a "src" folder that has "index.js" and "App.js" files which are of our interest. Write the following code in each file as follows and view the app at http://localhost:3000/

App.js: The "App.js" file has the following code.

JavaScript
// Importing individual react components to 
// reduce the code size
import React, { Component } from 'react';
import { Button } from 'reactstrap';
import { Jumbotron } from 'reactstrap';
import { Row } from 'reactstrap';
import { Col } from 'reactstrap';
import { Container } from 'reactstrap';

// This is what is displayed on the webpage
// we create a jumbotron having a message
// and a button
class App extends Component {
    render() {
        return (
            <div>
                <Jumbotron>
                    <Container>
                        <Row>
                            <Col>
                                <h1>Welcome to Reactstrap</h1>
                                <p>
                                    <Button color="danger">
                                        Click Me
                                    </Button>
                                </p>
                            </Col>
                        </Row>
                    </Container>
                </Jumbotron>
            </div>
        );
    }
}

export default App;

index.js: The "index.js" file has the following code.

JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

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

// If you want your app to work offline
// and load faster, you can change
// unregister() to register() below. 
// Note this comes with some pitfalls.
// Learn more about service workers: 
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

Output:

Conclusion:

Reactstrap makes use of class components whereas React-bootstrap makes use of functions and hooks.   Both the codes yield similar output and the only difference is the use of the components. The user may choose either depending on their preferences.

Next Article

Similar Reads