Customizing Tabs in React Bootstrap

In this guide, you will learn how to split content into different panes, each viewable to a user one at a time, by customizing tabs with React Bootstrap.

Sep 17, 2020 • 6 Minute Read

Subscribe to the newsletter

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.

          npx create-react-app react-bootstrap-tabs

cd react-bootstrap-tabs

npm start

Include React Bootstrap in your basic React app.

      npm install react-bootstrap bootstrap

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

          import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}


export default App;
    

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

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

You can now import Bootstrap components, for example:

      import { 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.

          import React, {Component} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Tabs, Tab, Modal, Row, Button, Col, Form, Card, Container} from "react-bootstrap";
 
 class App extends Component{
     constructor(props) {
         super(props);
       
     }
 
     render() {
         return (
             <Container>
                 <Row>
                     <Col>
                         <Tabs defaultActiveKey="Home" 
                               id="controlled-tab-example">
                             <Tab eventKey="home" title="Home">
                                 <Home />
                             </Tab>
                             <Tab eventKey="profile" title="Profile">
                                 <Profile />
                             </Tab>
                             <Tab eventKey="contact" title="Contact" disabled>
                                 <Contact />
                             </Tab>
                         </Tabs>
                     </Col>
                 </Row>
             </Container>
         );
     }
 }
 
 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.

          import React, {Component} from "react";

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


class Home extends  Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                This is my Home Page
            </div>
        );
    }

}
export default Home;
    

Profile Component.

          import React, {Component} from "react";

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


class Profile extends  Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                This is my Profile Page
            </div>
        );
    }

}
export default Profile;
    

Contact Component.

          import React, {Component} from "react";

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


class Contact extends  Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                This is my Contact Page
            </div>
        );
    }

}
export 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.

          import Home from "./Home";
import Profile from "./Profile";
import 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.