Integrate Bootstrap with React Js

Posted at: January 31, 2019 1:28 PM

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 className.

public/index.html

Note: Remove space from hyphen(-) for comment in index.html. i.e. comment like this

src/App.js

Create a custom component FormCdn.

src/FormCdn.js

Bootstrap as Dependency

In second method you can add bootstrap as dependency in your React Application.

Install bootstrap, jquery and popper.js from NPM.

Import bootstrap/dist/css/bootstrap.min.css and bootstrap/dist/js/bootstrap.min.js file into JavaScript entry file src/index.js

src/index.js

src/App.js

You can use JSX like same as Bootstrap CDN method. No need to add Bootstrap CDN link in public/index.html

Create a custom component FormBootstrapAsDependency.

src/FormBootstrapAsDependency.js

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:

React Bootstrap

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 bootstrap/dist/css/bootstrap.min.css file in JavaScript entry file src/index.js

src/index.js

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 src/FormReactBootstrap.js

src/App.js

Create a custom component FormReactBootstrap.

src/FormReactBootstrap.js

ControlId use for set id on form control and label's for attribute. For example

React

Regular html

Reactstrap

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 bootstrap/dist/css/bootstrap.min.css file in JavaScript entry file src/index.js

src/index.js

Import reactstrap required components in your src/App.js or your custom component. In this example I have imported reactstrap components in custom component src/FormReactStrap.js

src/App.js

Create a custom component FormReactStrap.

src/FormReactStrap.js

Conclusion

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.

This lesson also available on YouTube
integrate bootstrap with react react bootstrapreactstrap Bootstrap CDN Bootstrap as Dependency

Please leave comments

0 Comments