How to use bootstrap 4 in react js | reactjs install bootstrap 4

04-Apr-2023

.

Admin

Hi Guys,

Hello friends now we are learing how to install bootstrap 4 in react js. bootstrap is a css framwork. bootstrap have own class and design. Right now in most of react js application use bootstrap beause of it's provide responsive class and design.

Bootstrap also provide diffrent class and design for react js. you can see from here https://react-bootstrap.github.io/getting-started/introduction/

Installation


npm install react-bootstrap bootstrap

After install react-bootstrap we have to include in "src/index.js" or "App.js" file.

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

Bootstrap Button Example

If we have to use button in application first we have to import it from "react-bootstrap" library. you can import two way like ...

import Button from 'react-bootstrap/Button';

// or

import { Button } from 'react-bootstrap';

this is the example file of button App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Button } from 'react-bootstrap';

function App() {

return (

<div className="App">

<header className="App-header">

<Button variant="primary">Primary</Button>

</header>

</div>

);

}

export default App;

I hope it can help you...

#React.js