Recently diving into the world of React and Bootstrap, I decided to experiment with them by using react-bootstrap. It was mentioned that a simple way to override Bootstrap CSS is to apply your own CSS on top of it. So here's what I've been working on:
https://i.sstatic.net/ua0DD.png
First up, my App.js:
import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "bootstrap/dist/css/bootstrap.css";
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Container fluid>
<Navbar bg="dark" expand="lg" id="navbar-parent">
<Navbar.Brand href="#home" id="navigation-bar">TURLS</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" variant="pills">
<Nav.Link href="#home" className="whte">Home</Nav.Link>
<Nav.Link href="#api" className="whte">API</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
</Router>
);
}
export default App;
Next, we have the App.css:
#navigation-bar {
border-style: solid;
padding: 15px;
border-radius: 50px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 900;
color: white;
border-width: 5px;
font-size: 1.5em;
}
#navigation-bar:hover {
color: #3399ff;
}
.whte {
color: white;
}
While I successfully customized Nav.Brand, I encountered difficulty overriding styles for Nav.Link using my custom class .whte. My goal was to tweak the colors, fonts, pill sizes, and background colors, but I'm unsure how to proceed.
I resorted to using !important for text color changes, but I'm aware this isn't the best practice. Upon inspecting elements, I discovered that Nav.Links were inheriting their colors from certain Bootstrap classes despite my custom class .whte.
.navbar-light .navbar-nav .nav-link {
color: rgba(0,0,0,.5);
}
It turns out the blue-colored nav-pills were associated with these classes:
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
color: rgba(0,0,0,.9);
}
and
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #007bff;
}
I'm puzzled about which classes to target for achieving my desired effects. While I attempted to add my own CSS implementations, they didn't yield the expected results.
So, what's the typical approach to customizing Bootstrap CSS? Should I override every associated CSS class for a Bootstrap element? Or should I assign an ID to each element and customize them individually?
If my question seems basic or unclear, I appreciate any guidance on the recommended methods for modifying or customizing Bootstrap CSS within React Bootstrap.
Thank you for your assistance.