Bootstrap : comment aligner une Navbar (barre de navigation) à droite ?

Le framework Bootstrap propose des classes pour gérer facilement les barres de navigation dans son site internet. Beaucoup de sites internet proposent des options situées à droite de la barre de navigation, les menus pour se connecter par exemple. Il est possible d'aligner des éléments à droite de la barre de navigation.

Les barres de navigation utilisent un ensemble de classes commençant par les mots-clés "navbar" et "nav". Il existe deux solutions pour aligner à droite des éléments de la barre de navigation. La classe "ml-auto" permet d'aligner des éléments à droite de la barre. Les éléments qui n'ont pas cette classe seront alignés à gauche.

<div class="navbar-collapse collapse">
     <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à gauche</a>
          </li>
     </ul>
     <ul class="navbar-nav ml-auto">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à droite</a>
          </li>
     </ul>
 </div>

Il est également possible de faire l'inverse avec la classe "mr-auto". Cette classe aligne les éléments à gauche de la barre. Cela permet aux éléments qui n'ont pas cette classe d'être automatiquement alignés à droite.

<div class="navbar-collapse collapse">
     <ul class="navbar-nav mr-auto">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à gauche</a>
          </li>
     </ul>
     <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à droite</a>
          </li>
     </ul>
 </div>

Une autre possibilité est disponible grâce au modèle des "flexbox", à condition qu'il y ait uniquement deux éléments enfants. La classe "justify-content-between" permet d'aligner le premier élément à gauche et le deuxième à droite, en maintenant le maximum d'espace entre les deux.

<div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à gauche</a>
          </li>
     </ul>
     <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="#">Ce lien est aligné à droite</a>
          </li>
     </ul>
 </div>

Bootstrap