No entiendo la diferencia entre un div común y un div de clase container-fluid. La documentación oficial de la sección "Containers"solo hace referencia a que el container-fluid tiene un width de 100% en todos los "breakpoints" (es decir, lo mismo que un div común según entiendo). Sin embargo, al mirar el ejemplo de los NAVBAR en dicha documentación observamos el siguiente código:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Si eliminamos la clase container-fluid de la línea 2, dejando al DIV como uno común, observaremos un cambio importante. Dejando el código tal cual está, todos los elementos de la NAVBAR se encuentran alineados en una sola linea y en cambio, al eliminar la clase "container-fluid" se observa que arriba queda la "Navbar-Brand", cuyo texto es "NavBar", y abajo los links que componen la "unordered list". La pregunta es: ¿Que es lo que está haciendo realmente el container-fluid además de permitir que el width de dicho elemento ocupe el 100% en todas las posiciones -cosa que según entiendo ya ocurre sin agregar esta clase-? Adjunto fotos para ilustrar (la primera es de como se ve sin modificar el código de la documentación y la segunda es como se vería eliminando el container-fluid)