How to override React Bootstrap active Tab default border styling?

React-Bootstrap provides various components with basic default styling. Sometimes, there is a need to override those basic default styles as per requirements. In this article, let us discuss overriding that default styling for the border of the active tab in the navbar.

Prerequisites

• React JS
• React-Bootstrap

Steps to create React Application and install required modules:

Step 1: Create a React application using the following command:

npx create-react-app custom-style

Step 2: After creating your project folder(i.e. custom-style), move to it by using the following command:

cd custom-style

Step 3: Now install react-bootstrap in your working directory i.e. custom-style by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

Step 4: Now we need to Add Bootstrap CSS to the index.js or App.js file:

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

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Project Structure:

Example 1: In this example, we have a functional component `NavBarDemo`, which contains two tabs. I have set the `home ` as an active tab using the `defaultActiveKey` attribute.

Javascript

//NavBarDemo.jsx

import React from 'react';
import { Tab, Tabs } from 'react-bootstrap';
import './NavBarDemo.css';

const NavBarDemo = () => {
    return (
        <Tabs defaultActiveKey="home" id="your-tab-id">
            <Tab eventKey="home" title="Home">
                <p className='content'>This is Home tab</p>
            </Tab>
            <Tab eventKey="profile" title="Profile">
                <p className='content'>This is profile tab</p>
            </Tab>
        </Tabs>
    );
};

export default NavBarDemo;

Javascript

//App.js
import React from 'react';
import NavBarDemo from './NavBarDemo';
import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css";

const App = () => {
    return (
        <div className='component'>
            <NavBarDemo />
        </div>
    );
};

export default App;

CSS

/*NavBarDemo.css*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-color: green !important;
    border-style: dotted !important;
    border-radius: 15px;
    border-width: 3px;
}
.content {
    margin: 40px;
}

CSS

/*App.css*/
.component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Output:

Example 2: In this example, we are adding styling for the active tab to override the default border styling. The border styling in React-Bootstrap has more precedence over the custom CSS styling.

Javascript

//NavBarDemo.jsx

import React from 'react';
import { Tab, Nav, Navbar } from 'react-bootstrap';
import "./NavBarDemo.css";

function NavBarDemo() {
    return (
        <div>
            <Navbar bg="light" expand="lg" className="custom-navbar">
                <Navbar.Brand>Custom styling</Navbar.Brand>
            </Navbar>
            <Tab.Container id="navbar-tab"
                           defaultActiveKey="tab1"
                           className="custom-tab-container">
                <Nav fill variant="tabs">
                    <Nav.Item>
                        <Nav.Link className='nav-link'
                                  eventKey="tab1">
                            Tab 1
                        </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className='nav-link'
                                  eventKey="tab2">
                            Tab 2
                        </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className='nav-link'
                                  eventKey="tab3">
                            Tab 3
                        </Nav.Link>
                    </Nav.Item>
                </Nav>
                <Tab.Content>
                    <Tab.Pane eventKey="tab1"
                              className='content'>
                        This is Tab 1
                    </Tab.Pane>
                    <Tab.Pane eventKey="tab2"
                              className='content'>
                        This is Tab 2
                    </Tab.Pane>
                    <Tab.Pane eventKey="tab3"
                              className='content'>
                        This is Tab 3
                    </Tab.Pane>
                </Tab.Content>
            </Tab.Container>
        </div>
    );
}
export default NavBarDemo;

Javascript

//App.js
import React from 'react';
import NavBarDemo from './NavBarDemo';
import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css";

const App = () => {
    return (
        <div className='component'>
            <NavBarDemo />
        </div>
    );
};

export default App;

CSS

/*App.css*/
.component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

CSS

/* NavBarDemo.css */
.custom-navbar .navbar-brand {
    font-size: 24px;
}
.custom-tab-container .nav-link {
    margin-bottom: 26px;
}
.content {
    padding: 100px;
    background-color: rgb(
        255,
        255,
        255
    );
    border: 1px solid #8d908f;
    border-top: none;
}
.nav-link.active {
    border: 2px solid #049831 !important;
    font-weight: bold !important;
    border-radius: 2px;
}

Output: