Home Bootstrap How to use bootstrap 4 in react js?

How to use bootstrap 4 in react js?

by Shahriar Sagor

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

close

You may also like