NavBar Isn't Loading Background Color-CodePudding

SOLUTION from user (Someone Special): I needed to import the bootstrap css

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

I have the following code, and changing bg="dark" or "light" does nothing. I am attempting to learn from (https://react-bootstrap.github.io/components/navbar/). But, for some reason I cannot change the background color of the NavBar Component.

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap';

export class Header extends Component {
  render() {
    return ( 
    <div className="App"> 
  <Navbar  bg="dark" variant="dark">
    <Navbar.Brand>
      Evolve
    </Navbar.Brand>
  </Navbar>
    </div>
        )
  }
}

export default Header;

If I create my own css this works

header.js:

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap';

export class Header extends Component {
  render() {
    return ( 
    <div className="App"> 
  <Navbar  bg="nvBr" variant="dark">
    <Navbar.Brand>
      Evolve
    </Navbar.Brand>
  </Navbar>
    </div>
        )
  }
}

export default Header;

CSS:

.App {
  height: 1rem;
}


.bg-nvBr {
  background: crimson;
}

So, I guess the question really is why doesn't the bg="dark" work like it should for me?

CodePudding user response：

try this to your NavBar :

<Navbar className="bg-dark">

CodePudding user response：

SOLUTION from user (Someone Special): I needed to import the bootstrap css

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