Justify Nav-pills with Bootstrap v4

Question

I want to justify my navigation bar across the width of the div. The trouble is that I use Bootstrap v4 and the nav-justify class is not yet available.

Here is the code:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
    </li>
</ul>

I do not want to use percentages in CSS to do this ; I want something that is responsive.

Answer 1

As of Bootstrap alpha 6, nav-justified is back, and there is a new nav-fill class.

http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

You just need to add the class to your nav..

<ul class="nav nav-pills nav-justified">
        ..
</ul>

Bootstrap 4 Justified Nav

Answer 2

indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:

SCSS code:

// Justified nav links
// -------------------------

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    text-align: center;
    margin-bottom: 5px;
  }

  > .dropdown .dropdown-menu { //todo: remove child selector
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(sm) {
    .nav-item {
      display: table-cell;
      width: 1%;
    }
    .nav-link {
        margin-bottom: 0;
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
  border-bottom: 0;

  .nav-link {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: $border-radius;
  }

  .nav-link.active,
  .nav-link.active:hover,
  .nav-link.active:focus {
    border: 1px solid $nav-tabs-justified-link-border-color;
  }

  @include media-breakpoint-up(sm) {
    .nav-link {
      border-bottom: 1px solid $nav-tabs-justified-link-border-color;
      border-radius: $border-radius $border-radius 0 0;
    }
   .nav-link.active,
   .nav-link.active:hover,
   .nav-link.active:focus {
      border-bottom-color: $nav-tabs-justified-active-link-border-color;
    }
  }
}

.nav-justified {
  @include nav-justified;
  @include nav-tabs-justified;
}

compiled CSS code:

.nav-justified {
  width: 100%;
  border-bottom: 0; }
  .nav-justified .nav-item {
    float: none; }
  .nav-justified .nav-link {
    text-align: center;
    margin-bottom: 5px; }
  .nav-justified > .dropdown .dropdown-menu {
    top: auto;
    left: auto; }
  @media (min-width: 544px) {
    .nav-justified .nav-item {
      display: table-cell;
      width: 1%; }
    .nav-justified .nav-link {
      margin-bottom: 0; } }
  .nav-justified .nav-link {
    margin-right: 0;
    border-radius: 0.25rem; }
  .nav-justified .nav-link.active,
  .nav-justified .nav-link.active:hover,
  .nav-justified .nav-link.active:focus {
    border: 1px solid #ddd; }
  @media (min-width: 544px) {
    .nav-justified .nav-link {
      border-bottom: 1px solid #ddd;
      border-radius: 0.25rem 0.25rem 0 0; }
    .nav-justified .nav-link.active,
    .nav-justified .nav-link.active:hover,
    .nav-justified .nav-link.active:focus {
      border-bottom-color: #fff; } }

HTML

<div class="container">
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

large screens

small screen

UPDATE: As of BS4 alpha 6, the nav-justified is back, along with a new class nav-fill http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 3

They had it in the documentation of Boostrap v.4 alpha, on this page, but now it's broken.

There's corresponding ticket for this, and there is already created pull request for v4-dev branch.

To post the whole code snippet here, makes no sense, so the changes you may see here, and to patch yourself your SASS file:

// Justified nav links
// -------------------------

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    margin-bottom: $nav-tabs-justified-link-margin-bottom;
    text-align: center;
  }

  .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(md) {
    .nav-item {
      display: table-cell;
      width: 1%;
    }
    .nav-link {
      margin-bottom: 0;
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
  border-bottom: 0;

  .nav-link { // Override margin from .nav-tabs
    margin-right: 0;
    @include border-radius($nav-tabs-justified-link-border-radius);
  }

  .nav-link.active {
    @include plain-hover-focus {
      border: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
    }
  }

  @include media-breakpoint-up(md) {
    .nav-link,
    .nav-link.disabled,
    .nav-link.disabled:hover {
      border-bottom: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
      @include border-top-radius($nav-tabs-justified-link-border-radius);
    }
    .nav-link.active {
      @include plain-hover-focus {
        border-bottom-color: $nav-tabs-justified-active-link-border-color;
      }
    }
  }
}