Adding bootstrap to React.js project

React JSJavascript LibraryFront End Technology

There are multiple ways to add bootstrap in react project.

  • Using bootstrap CDN
  • Installing bootstrap dependency
  • Using react bootstrap packages

Using bootstrap CDN

This is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.

Below is one of the react CDN url

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

If we need the JavaScript components of bootstrap then we should add the jquery, popper.js in the index.html

With this the complete index.html will look like −

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json">
<linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico">
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App hello</title>
</head>
<body>
<divid="root"></div>
<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
   </script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
   integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
   </script>
<scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
   integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
   </script>
</body>
</html>

Adding bootstrap dependency

npm install bootstrap
npm install jquery popper.js

Now we can add these through import in index.js file of react project

import'bootstrap/dist/css/bootstrap.min.css';
import $ from'jquery';
importPopperfrom'popper.js';
import'bootstrap/dist/js/bootstrap.bundle.min';
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
ReactDOM.render(<Dropdown/>,document.getElementById('root'));
registerServiceWorker();

Using React bootstrap packages

There are two options to include react bootstrap packages

  • react-bootstrap
  • reactstrap

Install it with npm

npm install –save react-bootstrap

this package currently serves bootstrap 3 only and works is in progress for supporting the latest bootstrap.

Include it in App.jsx file
import'bootstrap/dist/css/bootstrap.css';
import'bootstrap/dist/css/bootstrap-theme.css';

Once installed we can directly use the bootstrap components in any components file.

import{SplitButton,MenuItem}from'react-bootstrap';
import React, { Component} from 'react';
import { Button } from 'react-bootstrap';
class HelloWorld extends Component {
   render() {
      return
      <div>
         <Button bsStyle="primary">Hello World Primary</Button>
         <Button bsStyle="success">Hello World Success</Button>
         <Button bsStyle="danger">Hello World Danger</Button>
      </div>
   }
}
export default HelloWorld;

using reactstrap

npm install –save reactstrap

reactstrapsupporst the bootstrap 4 version that means it is more latest than react-bootstrap

As bootstrap is most popular css framework , using it with react we can create the mobile first web applications very quickly.

We can import the components from reactstrap which are similar to other react component

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

Reactstrap has good support for modal windows and it’s the preferred library for react.

There are other libraries as well such as CoreUI-React, react-UI, React-Bootstrap-Table

raja
Published on 04-Sep-2019 11:50:07
Advertisements