Source vidéo : https://www.youtube.com/watch?v=23bpce-5s8I

Le conteneur principal est un élément nav ayant la classe navbar :

<nav class="navbar">
</nav>

Ajoutons un lien de type brand :

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

Ajouter les classes navbar-light et bg-light pour donner un thème et une couleur de fond à la navbar. On aurait également pu utiliser navbar-dark et bg-dark.

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
</nav>

Ajout d'une liste de liens. L'élément UL a la classe navbar-nav, les élements LI ont la classe nav-item, et les liens ont la classe nav-link :

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">Users</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Products</a>
        </li>
    </ul>
</nav>

Les liens sont alignés à droite de la barre. Pour les repousser vers la gauche (près du Brand), il faut ajouter la classe mr-auto à l'élément UL. Cette classe ajoute une marge automatique à droite, tandis que ml-auto ajouter une marge automatique à gauche.

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a href="#" class="nav-link">Users</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Products</a>
        </li>
    </ul>
</nav>

La navbar affiche actuellement les liens les uns au-dessus des autres, plutôt que les uns à côté des autres. C'est parce que la navbar n'est pas encore “collapsible”.

Entourer la liste de liens d'une DIV ayant les classes collapse et navbar-collapse :

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>

Actuellement la navbar n'affiche plus les liens. Ajouter une classe navbar-expand-{sm|md|lg|xl} à l'élément NAV :

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>

Les liens apparaîtront sur une taille d'écran supérieure ou égale à 576px (sm), à 768px (md), à 992px (lg) ou à 1200px (xl).

De plus ils sont maintenant affichés en ligne (les uns à côté des autres).

Maintenant les liens apparaissent lorsque l'écran dépasse une certaine largeur. Lorsqu'il est plus petit, les liens n'apparaissent pas. À la place nous allons ajouter un bouton de menu (de type hamburger).

Cela se traduit par un élément BUTTON portant la classe navbar-toggler et contenant un élément SPAN portant la classe navbar-toggler-icon :

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>

Pour le moment le bouton ne fait rien. Il faut encore lui ajouter une action (data-toggle) et une cible (data-target). La cible en question est un sélecteur CSS, en l'occurence l'id de l'élément DIV :

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <button class="navbar-toggler"
        data-toggle="collapse" data-target="#monMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="monMenu">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>

Un élément du menu horizontal peut avoir des sous-éléments affichés verticalement.

Pour cela il suffit de lui ajouter la classe dropdown et son contenu doit être structuré comme suit :

<li class="nav-item dropdown">
 
    <!-- Élément déroulant -->
    <a class="nav-link dropdown-toggle"
       href="#"
       id="mnuArticles"
       role="button"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false">Articles</a>
 
    <!-- Sous-éléments -->
    <div class="dropdown-menu" aria-labelledby"mnuArticles">
        <a href="#" class="dropdown-item">Option 1</a>
        <a href="#" class="dropdown-item">Option 2</a>
        <a href="#" class="dropdown-item">Option 3</a>
    </div>
 
</li>