How to Install Bootstrap in React Js

March 11, 2020 XpertPhp Comments 0 Comment

In this article, we will explain to you how to install bootstrap in react js. The bootstrap is a CSS framework and it’s used for website design.

here, We will use bootstrap 4 in our react application and explain to you with a simple example. so you can see our button style example.

So, You can learn react js step by step using the following our example.

Create React App

In this step, if you want to create a react js application then you can follow the below command or Url for react js installation.

npx create-react-app react_bootstrap_example
cd react_bootstrap_example

1 2	npx create-react-app react_bootstrap_example cd react_bootstrap_example

Install bootstrap in react js

now, After the installation of react js, you can install the bootstrap using the below command.

npm install react-bootstrap bootstrap

1	npm install react-bootstrap bootstrap

here, we will import the bootstrap in the index.js file, so you can see the below code.
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';

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-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import 'bootstrap/dist/css/bootstrap.min.css';

import * as serviceWorker from './serviceWorker';

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-PWA

serviceWorker.unregister();

so you can see the full app.js file and Modify your file using the below code.
src/app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
	<div className="container">
		<h2>How to Install Bootstrap in React Js - XpertPhp</h2>
		<h3>Button Styles</h3>
		<Button className="btn">Basic</Button>
		<Button className="btn btn-primary">Primary</Button>
		<Button className="btn btn-secondary">Secondary</Button>
		<Button className="btn btn-success">Success</Button>
		<Button className="btn btn-info">Info</Button>
		<Button className="btn btn-warning">Warning</Button>
		<Button className="btn btn-danger">Danger</Button>
		<Button className="btn btn-dark">Dark</Button>
		<Button className="btn btn-light">Light</Button>
		<Button className="btn btn-link">Link</Button>      
	</div>
  );
}

export default App;

import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Button } from 'react-bootstrap';

function App() {

return (

<h2>How to Install Bootstrap in React Js - XpertPhp</h2>

<h3>Button Styles</h3>

<Button className="btn">Basic</Button>

<Button className="btn btn-primary">Primary</Button>

<Button className="btn btn-secondary">Secondary</Button>

<Button className="btn btn-success">Success</Button>

<Button className="btn btn-warning">Warning</Button>

<Button className="btn btn-danger">Danger</Button>

<Button className="btn btn-light">Light</Button>

</div>

);

}

export default App;

Run React js application

If you want to run the application then you can follow the below command. if you any change in your app then use the npm run build and after you can run the application.

npm start

npm start

Now we will run our application using the below Url in the browser.

http://127.0.0.1:3000

1	http://127.0.0.1:3000

Please follow and like us: