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 ; } |
Output:
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.