React-Bootstrap Tabs Component Example
This example demonstrates creating a simple Tab using the React-Bootstrap Tabs Component.
JavaScript
// Filename - App.js import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>React-Bootstrap Tab Component</h4> <Tabs defaultActiveKey="second"> <Tab eventKey="first" title="Dashboard"> Hii, I am 1st tab content </Tab> <Tab eventKey="second" title="Setting"> Hii, I am 2nd tab content </Tab> <Tab eventKey="third" title="Aboutus"> Hii, I am 3rd tab content </Tab> </Tabs> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
React-Bootstrap Tabs Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Tabs Component provides a way to make form dynamic tabbed interfaces. With the help of tabs, the user can switch between components present in given different tabs. We can use the following approach in ReactJS to use the react-bootstrap tabs Component.