title: Justifying a navbar in Bootstrap 4
body: <p>I have a navbar on which I've made use of <a href="http://getbootstrap.com/docs/4.0/components/dropdowns/#split-button-dropdowns" rel="noreferrer">split button dropdowns</a> and regular <code>nav-items</code> without dropdowns.</p>
  
  <p>I have it somewhat working, but I'm trying to get the navigation elements to fill the browser window. I've seen references to a "factory" Bootstrap class that will do it, but I can't get it working.</p>
  
  <p>I have 2 questions:</p>
  
  <ol>
  <li><p>What would be the "factory" method way of doing this in Bootstrap 4?</p></li>
  <li><p>Why is the spacing between the button elements inconsistent?</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding-top: 70px
  }
  
  .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
  }
  
  
  /* CSS menu */
  .navbar, .navbar.btn-secondary {
    /* For browsers that do not support gradients */
    background-color: #b32017;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(#b32017, #801710);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(#b32017, #801710);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(#b32017, #801710);
    /* Standard syntax */
    background: linear-gradient(#b32017, #801710);
  }
  
  .navbar .btn-secondary {
    /*background-color: #b32017;*/
    /* For browsers that do not support gradients */
    background-color: #b32017;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(#b32017, #801710);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(#b32017, #801710);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(#b32017, #801710);
    /* Standard syntax */
    background: linear-gradient(#b32017, #801710);
  }
  
  .navbar img {
    max-height: 40px;
  }
  
  .navbar .btn {
    /* Removes Bootstrap's border */
    border: 0px;
  }
  
  .navbar .navbar-brand {
    color: #ffffff;
  }
  
  .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
    color: #c1c1c1;
  }
  
  .navbar .navbar-text {
    color: #ffffff;
  }
  
  .navbar .navbar-nav .nav-link {
    color: #ffffff;
    border-radius: .25rem;
    margin: 0 0.25em;
  }
  
  .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {
    color: #c1c1c1;
  }
  
  .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {
    color: #c1c1c1;
    background-color: #801710;
  }
  
  .navbar .navbar-toggle {
    border-color: #801710;
  }
  
  .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
    background-color: #801710;
  }
  
  .navbar .navbar-toggle .navbar-toggler-icon {
    color: #ffffff;
  }
  
  .navbar .navbar-collapse, .navbar .navbar-form {
    border-color: #ffffff;
  }
  
  .navbar .navbar-link {
    color: #ffffff;
  }
  
  .navbar .navbar-link:hover {
    color: #c1c1c1;
  }
  
  @media (max-width: 767px) {
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item .dropdown-menu.show {
      /* no gradient support */
      /* #cccccc */
      color: #ffffff;
  
      /* For browsers that do not support gradients */
      background-color: #ffffff;
      /* For Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(#ffffff, #cccccc);
      /* For Opera 11.1 to 12.0 */
      background: -o-linear-gradient(#ffffff, #cccccc);
      /* For Firefox 3.6 to 15 */
      background: -moz-linear-gradient(#ffffff, #cccccc);
      /* Standard syntax */
      background: linear-gradient(#ffffff, #cccccc);
  
    }
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .open .dropdown-menu .dropdown-item:focus {
      color: #c1c1c1;
    }
    .navbar .navbar-nav .open .dropdown-menu .dropdown-item.active {
      color: #c1c1c1;
      background-color: #801710;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;title&gt;Experimental Test Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light"&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
      &lt;!-- Brand --&gt;
      &lt;a class="navbar-brand" href="#"&gt;
      &lt;/a&gt;
      &lt;div class="collapse navbar-collapse" id="nav-content"&gt;
        &lt;ul class="navbar-nav btn-group"&gt;
          &lt;!-- Home --&gt;
          &lt;li class="nav-item"&gt;
            &lt;div class="btn-group"&gt;
              &lt;a href="#" class="btn btn-secondary" role="button"&gt;&lt;i class="fa fa-fw fa-home"&gt;&lt;!-- --&gt;&lt;/i&gt; Home&lt;/a&gt;
              &lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"&gt;
              &lt;/button&gt;
              &lt;div class="dropdown-menu"&gt;
                &lt;a class="dropdown-item" href="#"&gt;&lt;i class="fa fa-fw fa-map-marker"&gt;&lt;!-- --&gt;&lt;/i&gt;Hours &amp;amp; Location&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;div class="btn-group" role="button"&gt;
              &lt;a href="#" class="btn btn-secondary" role="button"&gt;Section&lt;/a&gt;
              &lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"&gt;
              &lt;/button&gt;
              &lt;div class="dropdown-menu"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 1&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 2&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 3&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 4&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link btn btn-secondary" href="#" role="button"&gt;Another Section&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link btn btn-secondary" href="#" role="button"&gt;Section&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link btn btn-secondary" href="#" role="button"&gt;Section&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;div class="btn-group" role="button"&gt;
              &lt;a href="#" class="btn btn-secondary" role="button"&gt;Products&lt;/a&gt;
              &lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"&gt;
              &lt;/button&gt;
              &lt;div class="dropdown-menu"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 1&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Item 2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>