Show nav options within the margin of the div container in Bootstrap

Question

Show nav options within the margin of the div container in Bootstrap

Navigation

#1 by (3 votes)

2

In Bootstrap 4 you define: <nav class="navbar ... and the navigation bar occupies the entire width of the screen just like the elements. And if we define the <nav> within a div="container" , bootstrap gives it side margins.

I want my menu to occupy what defines the div="container" but that the bar of <nav> occupy the full 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>

bootstrap-4

asked by Piropeator 19.12.2017 в 23:14

source

1 answer

Delete files with Python java.lang.NumberFormatException: null what does it mean?

score 3 · Accepted Answer

You simply have to add the div.container within the structure of your nav and so your buttons will stay in that width you want without affecting the background.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <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>
  </div>
</nav>