Difference between reactstrap and react-bootstrap

25 Oct, 2020
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:
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 componentsimport 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 webpageconst 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 CSSimport '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-PWAserviceWorker.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 sizeimport 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 buttonclass 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-PWAserviceWorker.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.
Bootstrap-Misc
Bootstrap
Difference Between
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.