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
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 : 100 vh; } |
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 : 100 vh; } |
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 ; } |
Contact Us