Correction : Il faut rajouter un bouton qui apparaitra quand la fenêtre est trop étroite et de même englober la liste des item de la barre de navigation dans un élément div qui disparaitra lorsque la fenêtre est trop étroite.
Pour que ces comportements fonctionnent il faut penser à intégrer le code javascript
de Bootstrap et de JQuery et Poppers (utilisés par Bootstrap). Ceci est fait à la fin
de l'élément body.
...
</head>
<body>
<!-- La bare de navigation -->
<!-- quand la fenêtre est trop étroite les items sont automatiquement remplacés par un bouton -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark ">
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="maPage2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="maPage3.html">Page 3</a>
</li>
</ul>
</div>
</nav>
<!-- le contenu de la page est dans un grille bootstrap -->
<div class="container-fluid">
<!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
<h1>Ma première page bootstrap</h1>
...
<div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=""sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous">
</script>
</body>
</html>