Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding bootstrap to React.js project
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
2K+ Views
