Integrate Bootstrap with React Js
How to integrate Bootstrap with React Js
In this tutorial we will learn how to integrate bootstrap in react application.
We can integrate bootstrap in React App using several ways. In this tutorial we have taken example of creating a form using bootstrap. We will explain 3 ways of integrate bootstrap in React App.
- Using Bootstrap CDN
- Bootstrap as Dependency
- React Bootstrap Package
Using Bootstrap CDN
This is very simple and easy way to integrate bootstrap in your React App. You will integrate bootstrap CDN link in public/index.html. Add css link in head section and js link in body tag before body close.
You use like as regular but one change is required, css
class replace with
Note: Remove space from hyphen(-) for comment in index.html. i.e. comment like this
Create a custom component FormCdn.
Bootstrap as Dependency
In second method you can add bootstrap as dependency in your React Application.
Install bootstrap, jquery and popper.js from NPM.
You can use JSX like same as Bootstrap CDN method. No need to add Bootstrap CDN link in
Create a custom component FormBootstrapAsDependency.
React Bootstrap Package
In this method add bootstrap in your React Application by using a package. Rebuilt bootstrap components as React components. There are two popular methods are:
Now Bootstrap 4 components built with React. Getting started with React Bootstrap.
React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery.
Install React Bootstrap and Bootstrap in your application from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well.
Import react bootstrap required components in your
src/App.js or your custom component. In this example I have imported react bootstrap components in custom component
Create a custom component FormReactBootstrap.
ControlId use for set id on form control and label's for attribute. For example
Reactstrap also targeting bootstrap 4. It is similar like as React Bootstrap.
Install Reactstrap and Bootstrap in your application from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well.
Import reactstrap required components in your
src/App.js or your custom component. In this example I have imported reactstrap components in custom component
Create a custom component FormReactStrap.
In this tutorial we have integrated Bootstrap in React Application in several methods and we have taken example of creating form. And also I have explained most popular methods React Bootstrap and Reactstrap and use Container, Row, Col, Button, Form etc.