Kimaru Thagana

Customizing Tabs in React Bootstrap

Kimaru Thagana

Sep 17, 2020
6 Min read
21,059 Views

Sep 17, 2020
6 Min read
21,059 Views

Web Development

Client-side Frameworks

React

Front End Web Development

Introduction

In frontend development, a developer has to build a user interface (UI) with user experience (UX) in mind. With Bootstrap tabs, React developers can do this by splitting content into different panes where each pane is viewable to a user one at a time. This approach can be useful when creating stepper-like components that need a user's approval before navigating to the next tab. It is also a UX technique that presents information in separate panes instead of one large body of text. This makes the website seem more organized.

Consider a scenario in which you, as a React developer, are designing your own portfolio website. You want to display your information in the most organized manner and you choose three tabs. The first displays work history (profile page), the second displays education and academic history (home page) and the third displays your contact information (contact page).

In this guide, you will learn how to customize tabs with React Bootstrap using React.js. The guide assumes that you have basic knowledge of React.js.

Set Up a Sample App

Open your terminal and run these commands to create a basic React app.

1npx create-react-app react-bootstrap-tabs
2
3cd react-bootstrap-tabs
4
5npm start

bash

Include React Bootstrap in your basic React app.

1npm install react-bootstrap bootstrap

bash

Delete the code in the newly created App.js file and paste the sample code below.

1import React, {Component} from 'react';
2
3class App extends Component{
4    constructor(props) {
5        super(props);
6        
7    }
8
9    render() {
10        return (
11            <div>
12                
13            </div>
14        );
15    }
16
17}
18
19
20export default App;

In your app.js file, include the stylesheet as well.

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

You can now import Bootstrap components, for example:

1import { Button } from 'react-bootstrap';

Set Up Tabs

In the sample code below, you will create three separate tabs with different content in each pane. Each pane will be a React component. You will then add the tabs component from React Bootstrap. Remember to import the components if you get errors in your code.

1 import React, {Component} from 'react';
2 import 'bootstrap/dist/css/bootstrap.min.css';
3 import {Tabs, Tab, Modal, Row, Button, Col, Form, Card, Container} from "react-bootstrap";
4 
5 class App extends Component{
6     constructor(props) {
7         super(props);
8       
9     }
10 
11     render() {
12         return (
13             <Container>
14                 <Row>
15                     <Col>
16                         <Tabs defaultActiveKey="Home" 
17                               id="controlled-tab-example">
18                             <Tab eventKey="home" title="Home">
19                                 <Home />
20                             </Tab>
21                             <Tab eventKey="profile" title="Profile">
22                                 <Profile />
23                             </Tab>
24                             <Tab eventKey="contact" title="Contact" disabled>
25                                 <Contact />
26                             </Tab>
27                         </Tabs>
28                     </Col>
29                 </Row>
30             </Container>
31         );
32     }
33 }
34 
35 export default App;

In the code above you have a tabs component, which has a set defaultActiveKey set to load your Home component first when the page loads. Inside the Tabs component, there are tabs that load different panes. The eventkey checks which tab to load.

Now create three separate React components that will be added into the main App.js file. Create three files in your root folder named Home.js, Profile.js, and Contact.js. Copy the sample code below.

1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Home extends  Component{
7    constructor(props) {
8        super(props);
9        
10    }
11
12    render() {
13        return (
14            <div>
15                This is my Home Page
16            </div>
17        );
18    }
19
20}
21export default Home;

Profile Component.

1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Profile extends  Component{
7    constructor(props) {
8        super(props);
9
10    }
11
12    render() {
13        return (
14            <div>
15                This is my Profile Page
16            </div>
17        );
18    }
19
20}
21export default Profile;

Contact Component.

1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Contact extends  Component{
7    constructor(props) {
8        super(props);
9
10    }
11
12    render() {
13        return (
14            <div>
15                This is my Contact Page
16            </div>
17        );
18    }
19
20}
21export default Contact;

You might experience errors in your App.js file. Your components are initialized, but your App.js file has no idea where your components are. Add these lines to your App.js to import your components.

1import Home from "./Home";
2import Profile from "./Profile";
3import Contact from "./Contact";

Now you have a fully functional React app with tabs. Each tab, when clicked, will present a different pane with different information.

Conclusion

In this guide, you have developed custom tabs using React.js and React Bootstrap. This knowledge is vital to developers in frontend and React developer positions. Using tabs in websites consolidates information, thus allowing for better UX.

To further build on this guide, learn more about React Bootstrap components from the official site.

LEARN MORE