Hello Devs,
In this tutorial, we are going to learn react bootstrap toast example.
Follow this step by step guide given below:
Install react-bootstrap
npm install react-bootstrap bootstrap
Run this command:
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
src/App.js
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Toast } from 'react-bootstrap';
function App() {
const [show, setShow] = useState(false);
return (
<div className="container">
<h1>React Bootstrap Toast Example - Rathorji.in</h1>
<Toast onClose={() => setShow(false)} show={show} delay={2000} autohide>
<Toast.Header>
<strong className="mr-auto">Bootstrap Toast</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>This is simple Bootstrap Toast Example</Toast.Body>
</Toast>
<Button onClick={() => setShow(true)}>Click to Show Toast</Button>
</div>
);
}
export default App;
Run this command:
npm start
I hope this example helps you.