Theming the navbar in Twitter Bootstrap 4

Question

The Twitter Bootstrap documentation offers no explanation with the following navbar example

<nav class="navbar navbar-dark bg-inverse">
  <!-- 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>

there is the image output of the above examples biut no explanation on how they actually affects the navbar. Can somebody explain how they work?

Answer 1

As you can see using the image example using the documentation Color schemes each class affects the navbar with a couple of different css attributes. If you need to know which exact styles, you can check this easily by simply trying it out.

Although you could check bootstrap v4alphas github page to read through their SCSS files. For example these are changes made using .navbar-light :

// Dark links against a light background
.navbar-light {
  .navbar-brand {
    color: $navbar-light-active-color;

    @include hover-focus {
      color: $navbar-light-active-color;
    }
  }

  .navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus {
        color: $navbar-light-hover-color;
      }
    }

    .open > .nav-link,
    .active > .nav-link,
    .nav-link.open,
    .nav-link.active {
      @include plain-hover-focus {
        color: $navbar-light-active-color;
      }
    }
  }

  .navbar-divider {
    background-color: rgba(0,0,0,.075);
  }
}