React JS Bootstrap not applied - reactjs

Question

I am building a new ReactJS app and tried to use react-bootstrap for the UI. I essentially installed yarn add react-bootstrap bootstrap yarn add jquery popper.js" to have everything installed. My index.js` looks as follows:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import * as serviceWorker from './serviceWorker';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js is quite straightforward:
import React from 'react';
import AppHeader from "./layout/AppHeader";
import RouterOutlet from "../router/Router";
import AppFooter from "./layout/AppFooter";
function App() {
return (
<div>
<div className="wrap">
<AppHeader />
<div className="container">
<RouterOutlet />
</div>
</div>
<AppFooter />
</div>
);
}
export default App;
The interesting part now is the header not working as expected, its containing the NavBar
import React from 'react';
import NavDropdown from 'react-bootstrap/NavDropdown'
import Navbar from "react-bootstrap/Navbar";
class AppHeader extends React.Component {
render () {
return (
<Navbar variant="dark" sticky="top">
<Navbar.Brand>
<img
src="/logo192.png"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "/>
</Navbar.Brand>
<NavDropdown bg="black" title="Menu" id="collasible-nav-dropdown" style={{color: "#5299d3"}}>
<NavDropdown.Item href="/">Home</NavDropdown.Item>
<NavDropdown.Item href="/time">Time</NavDropdown.Item>
<NavDropdown.Item href="/login">Login</NavDropdown.Item>
<NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
</NavDropdown>
</Navbar>
);
}
}
export default AppHeader
This is the Footer
import * as React from 'react';
class AppFooter extends React.Component {
render() {
return (
<footer className="footer">
<div className="container">
<p className="pull-left">© My Company</p>
<p className="pull-right">asd</p>
</div>
</footer>
);
}
}
export default AppFooter;
However the bootstrap styles are not applied, the bar is white without any background at all. Also other things such as "pull-right" classes in the footer don't work. I can see in the browser though that the CSS is loaded as a inline CSS file.
Question: why are the styles not applied to my components so far?

Answer 1

To add background to Navbar, add 'bg="primary" ' to your code in AppHeader like this-
<Navbar bg="primary" variant="dark" sticky="top">
This will make you background blue.