How to use bootstrap 4 in react js?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this blog, i will show you how to install bootstrap 4 in react js application. Here we know that bootstrap is a css framwork. So we know that bootstrap have own class and also has own design. Right now in most of the react js application is use bootstrap because of it’s provide us the responsive class and also design.

And bootstrap also provide us a different class and design for react js application. we can see from here https://react-bootstrap.github.io/getting-started/introduction/

Installation
npm install react-bootstrap bootstrap

So after the install react-bootstrap we need to include in “src/index.js” or “App.js” file.

import 'bootstrap/dist/css/bootstrap.min.css';
Bootstrap Button Example

Now if we need to use button in application at first we need to import it from “react-bootstrap” library. So we can import this on two way like …

import Button from 'react-bootstrap/Button';
// or
import { Button } from 'react-bootstrap';

Now 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;

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →