Right part of nav in bootstrap 4

Question

I am creating a navbar in ng-bootstrap (Angular 4 + Bootstrap 4) with some items on the left (a pulldown) and some on the right (a non-pulldown). I've been able to left & right align with the code below, but the right aligned item is higher up and a different color, suggesting some CSS is being applied correctly.

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">My App</a>
  <div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed">
    <div class="navbar-nav mr-auto">

      <div class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
            Pulldown1
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
          <button class="dropdown-item">item1</button>
          <button class="dropdown-item">item2</button>
          <button class="dropdown-item">item3</button>
          <button class="dropdown-item">item4</button>
        </div>
      </div>
    </div>
    <div class="navbar-nav nav-right">
      <div class="nav-item">
        <a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a>
      </div>
    </div>
  </div>
</nav>

In case it's related, the glyphicon is missing too - but that may be unrelated.

I also tried "justify-content-end" instead of "nav-right" but no difference. (Found some contradictory documentation)

[Glyphicons are not included in Bootstrap 4.](https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration) — HaveSpacesuit, Aug 07 '17 at 21:00

score 0 · Accepted Answer · answered Aug 07 '17 at 21:21

You can get the formatting you want by adding the nav-link class:

<div class="navbar-nav nav-right">
  <div class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </div>
</div>

Since Glyphicons are no longer included in Bootstrap , you can either include a reference to another icon library like Font Awesome or add your own image.

Right part of nav in bootstrap 4

1 Answers1