Substantiate Nav tablets with Bootstrap v4

Question

I want to justify my div-wide navigation bar. The problem is that I'm using 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 for this; I want something responsive.

Answer 1

really missing the nav-justify class . You can add it yourself based on the TB3 code:

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:

 .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: Starting with BS4 alpha 6, nav-justified returns with the new nav-fill class http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 2

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

There is a ticket for this , and a pull request has already been created for the v4-dev branch .

It doesn't make sense to post the entire code snippet here, so the changes you can see here and fix 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; } } } } 

Answer 3

Starting with Bootstrap alpha 6, nav-justified returns and a new nav-fill class appears.

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 Informed Nav