In Bootstrap 4 it is defined: <nav class="navbar ...
and the navigation bar occupies the full width of the screen as well as the elements. And if we define the <nav>
inside a div="container"
, bootstrap gives it side margins.
I want my menu to occupy what defines the div="container"
but that the bar <nav>
occupies the entire width of the screen.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav text-center">
<a class="nav-item nav-link" href="#">Inicio</a>
<a class="nav-item nav-link" href="#">Servicios</a>
<a class="nav-item nav-link" href="#">Contacto</a>
</div>
</div>
</nav>
You simply have to add the
div.container
within the structure of yournav
and so your buttons will be in that width you want without affecting the background.