Bootstrap 4, Bg-Inverse Not Showing

Bootstrap 4, bg-inverse not showing?

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/

bootstrap@4.0.0-beta

<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/

navbar not working when updating bootstrap 4.0.0 alpha to newer version

simply change navbar-toggleable-md to navbar-expand-md and for add colors, change navbar-inverse bg-inverse to navbar-dark bg-dark.

your burger-menu is left side you can change into right side by add anchor tag before button

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>

Working Snippet

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

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

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">

        <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <a href="https://www.linkedin.com/"><i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i></a>

      <a href="https://www.xing.com"><i class="fa fa-xing-square socialIcons" aria-hidden="true"></i></a>

      <a href="https://stackexchange.com/"><i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i></a>

      <input class="form-control mr-sm-2" type="text" placeholder="Search">

      <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Bootstrap 4 navbar-toggler-icon does not appear

Update:

navbar-inverse is no longer available in B4 version, you can use navbar-dark instead.

---

Use navbar-inverse bg-inverse instead of .navbar-default

<section role="navigation">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->

    <div class="container">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>

      <a href="#" class="navbar-brand">KP</a>

      <div class="collapse navbar-collapse" id="myNavigation">
          <div class="navbar-nav">
            <a class="p-3 nav-item nav-link active " href="#">Home</a>
            <a class="p-3 nav-item nav-link " href="#">About</a>
            <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
          </div><!-- <div class="navbar-nav"> -->
      </div><!-- <div class="collapse navbar-collapse"> -->

    </div><!-- <div class="container"> -->

  </nav>
</section>

Updated fiddle

Collapse hamburger menu not visible in bootstrap 4's navbar-inverse?

Bootstrap 4 have major changes from bootstrap 3.

I use this to upgrade from BS3 to BS4 http://upgrade-bootstrap.bootply.com/

Here's your Bs4 dark navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-expand-md"> <a id="logo" class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item"> <a class="nav-link text-light" href="#">Browse</a>
        </li>
    </ul>
</div>

Bootstrap navbar-toggler-icon not visible but functioning normally

Try using navbar navbar-light instead of navbar navbar-inverse.

Bootstrap 4 is a major rewrite of the older Bootstrap and this was changed

Bootstrap Migration guide

---

Related Topics