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.