In this example, you will learn react bootstrap tab example. you will learn bootstrap tabs in react example. you will learn bootstrap tabs example react. i would like to show you simple bootstrap tabs react native.
I will show you how to use bootstrap tabs in react application. you have to just simple follow few step to done simple example of bootstrap tabs in react js. in this example we will install react-bootstrap and use their tabs class to tabs modal in react app.
just follow few step to add bootstrap tabs 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 tabs using react-bootstrap library.
Import Tabs, Tab from react-bootstrap library.
let's add bellow code:
src/App.js
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Tabs, Tab } from 'react-bootstrap';
function App() {
const [key, setKey] = useState('home');
return (
<div className="container">
<h1>React Bootstrap Tabs Example - HDTuto.com</h1>
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
>
<Tab eventKey="home" title="Home">
<p>this is a home tab</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Tab>
<Tab eventKey="profile" title="Profile">
<p>this is profile tab</p>
</Tab>
<Tab eventKey="setting" title="Setting">
<p>this is setting tab</p>
</Tab>
</Tabs>
</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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example