Justifying a navbar in Bootstrap 4

bootstrap navbar
bootstrap 4 navbar right
bootstrap navbar-right
bootstrap 4 navbar examples
bootstrap 4 vertical divider navbar
bootstrap stacked navbar
bootstrap tabs styling
navbar right align bootstrap 4

I have a navbar on which I've made use of split button dropdowns and regular nav-items without dropdowns.

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.

I have 2 questions:

  1. What would be the "factory" method way of doing this in Bootstrap 4?

  2. Why is the spacing between the button elements inconsistent?

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;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Experimental Test Page</title>
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
    <!-- Brand -->
    <a class="navbar-brand" href="#">
    </a>
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav btn-group">
        <!-- Home -->
        <li class="nav-item">
          <div class="btn-group">
            <a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours &amp; Location</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Section</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
              <a class="dropdown-item" href="#">Item 3</a>
              <a class="dropdown-item" href="#">Item 4</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Products</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

You could use nav-justified, making sure the navbar-nav is full width using w-100...

<ul class="navbar-nav w-100 nav-justified">
      <li class="nav-item">..<li>
      <li class="nav-item">..<li>
</ul>

https://www.codeply.com/go/od0TnGfQv2

Bootstrap 4 Navbar Justify on Codeply, Example nav with justified links that fill the width of the container. Codeply example. How to align navbar items to the right in Bootstrap 4 ? The.ml-auto class in Bootstrap can be used to align navbar items to the right. The.ml-auto class automatically aligns elements to the right. In this article, we will align the navbar to the right in two different ways, below both the approaches are discussed with proper example.

encountered same issue with me but with logo. I just added nav-justified & w-100 classes along with the navbar-nav class.

Here the screenshot of navbar.

Here The Code:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded px-5">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img src="img/logo.png" class="img-fluid" alt="Logo">
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav nav-justified w-100">
                <li class="nav-item active">
                    <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">  Mission & Vission</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Brands
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Alo maids</a>
                        <a class="dropdown-item" href="#">Alo Technical</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">   Brands</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">   Brands</a>
                </li>
            </ul>
        </div>
    </nav>

Navbar · Bootstrap, Justified Tabs/pills. Justify the tabs/pills with the .nav-justified class (equal width):. Active; Link; Link; Disabled. Basic Navbar. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

Add class w-100 @ navbar

And add class nav-fill w-100 @ navbar-nav

<nav class="navbar navbar-expand-lg navbar-light w-100">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvb1" aria-controls="nvb1" aria-expanded="false" aria-label="Menu switcher">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nvb1">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item active"><a href="{{ url('/') }}" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="{{ url('') }}" class="nav-link">Links</a></li>
            <li class="nav-item"><a href="{{ url('') }}" class="nav-link">Links</a></li>
        </ul>
    </div>
</nav>

https://jsfiddle.net/Cotiga/84kc3rqL/

Bootstrap 4 Navs, Nikita Sarbashev pro asked 4 years ago. 0 0. Hi, I want to justify navbar items on md+ screens. Added custom style @media only screen and (min-width: 768px)  In this article, I’ll show you how to create a responsive Navbar using Bootstrap 4. Herein, we are going to design a navbar for the food website which will have options like Home, Categories, About Us, Contact and Search Box. We will design a responsive navbar.

Justify navbar items, Responsive Bootstrap 4 with justified navbar items example. It includes a Sass compiler and a set of Panini HTML templates for you. Panini is a super simple flat​  Like I said in the beginning of the article, the navbar acts like a Bootstrap 4 flex container. One of things that you need to keep in mind is that the responsive behaviour has the flex direction set to .justify-content-between and the expanded behaviour has the flex direction set to .justify-content-start.

bassjobsen/nav-justified: Responsive Bootstrap 4 with , Align items in bootstrap navbar menu · HTML & CSS If you're using 4+ then you can take advantage of the a full range of flex box utilities. Totally changes div> <div class="d-flex justify-content-around"></div>. 1 Like. It's little change in boostrap 4. To align navbar to right side, you've to make only two changes. they are: in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100. in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto.

Align items in bootstrap navbar menu - HTML & CSS, <ul class="nav justify-content-center">. 2. <li class="nav-item">. 3. <a class="nav-​link active" href="#">Active</a>. 4. </li>. 5. <li class="nav-item">. 6. You just need to put all content into single div in order to Justify content with bootstrap classes. Also, I am using navbar-brand and making them show hide depending on screen resolution. You can do that with js which might be smoother once the page loads completely.

Comments
  • Thank you for such a prompt response! What would you recommend as the the correct way to get the split button groups to change text color on hover the way the stand-alone links do?
  • Got it! Add nav-link as a class on the buttons to get them to behave as the stand-alone links do.
  • nav-fill could be a better alternative to nav-justified in some cases since the width of each item will be adapted to the content