Bootstrap 4, bg-inverse not showing?

Question

Trying to follow the navbar example in Bootstraps documentation, I have a problem where the background colour of the navbar doesn't get loaded.

<nav class="navbar navbar-inverse bg-inverse">
    <a class="navbar-brand" href="#">Navbar</a>
</nav> 

I took a look in bootstrap.css and bg-inverse does not appear there. Am I supposed to create the colours myself, or am I doing something wrong? (I am working in an Angular project)

Answer 1

I think you are using Bootstrap beta version. Use the Alpha version. It will solve the problem , they are not provide bootstrap 4 beta for the navbar-inverse bg-inverse

bootstrap -v 4.0.0.alpha6

<nav class="navbar navbar-inverse bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-inverse bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

look at this https://getbootstrap.com/docs/4.0/components/navbar/

[email protected]

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

look at this https://getbootstrap.com/docs/4.0/components/navbar/

Answer 2

Bootstrap 4 doesn't have css classes navbar-inverse bg-inverse. You need to use combination of navbar-light bg-light or navbar-dark bg-darkwith nav component. For example:

• <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> </nav>