HDTuto.com

How to Use Bootstrap Popovers in React?



I am going to explain you example of react bootstrap tab example. step by step explain bootstrap popovers in react example. This article will give you simple example of bootstrap popovers example react. we will help you to give example of simple bootstrap popovers react native.

I will show you how to use bootstrap popovers in react application. you have to just simple follow few step to done simple example of bootstrap popovers in react js. in this example we will install react-bootstrap and use their popovers class to popovers modal in react app.

just follow few step to add bootstrap popovers in react native app.

Preview:

Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

serviceWorker.unregister();

Bootstrap Tabs Code

in our App.js file, we will write code for open simple bootstrap 4 popovers using react-bootstrap library.

Import Button, OverlayTrigger, Popover from react-bootstrap library.

let's add bellow code:

src/App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Button, OverlayTrigger, Popover } from 'react-bootstrap';

function App() {

const popoverRight = (

<Popover id="popover-basic">

<Popover.Title as="h3">Popover Right</Popover.Title>

<Popover.Content>

This is simple popover example right side.

</Popover.Content>

</Popover>

);

const popoverTop = (

<Popover id="popover-basic">

<Popover.Title as="h3">Popover Top</Popover.Title>

<Popover.Content>

This is simple popover example top side.

</Popover.Content>

</Popover>

);

return (

<div className="container">

<h1>React Bootstrap Popovers Example - HDTuto.com</h1>

<OverlayTrigger trigger="click" placement="right" overlay={popoverRight}>

<Button variant="success">Right - Click Me!</Button>

</OverlayTrigger>

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>

<Button variant="success">Top - Click Me!</Button>

</OverlayTrigger>

</div>

);

}

export default App;

Now we are ready to run our example by bellow command:

npm start

Now you can check it. it's layout as like above.

I hope it can help you...




May 25, 2020 | Category : React



Blog Search