Bootstrap 4 Navbar align logo center and toggle icon on the left

Question

i want to make the logo centered and links on the left side in the navbar and when they collapse in small devices the toggle button should appear in the left side,here appea

Answer 1

Sure, sorry about that, I should have added it earlier. So basically what we are doing is moving the .navbar-brand to the middle giving it the parameter of 0 auto, and adjusting the .navbar-collapse (so the items of our menu) to the left, giving 10px space from the top of the nav. Then with a media query, which will start to work only at 767px, we cetralize the .navbar-brand, so it will be always in the middle, we now adjust the .navbar-toggler (menu icon) as we did erlier with the menu items, whic now are getting the default position giving them the following style: position: inherit; then I have also modified the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint

.navbar-brand {
	margin: 0 auto;
}
.navbar-collapse {
	position: absolute;
	top: 10px;
}

@media (max-width: 767px) {
.navbar-brand {
	text-align: center;
}
.navbar-toggler {
	position: absolute;
	top: 10px;
}
.navbar-collapse {
	position: inherit;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" 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" href="#">Disabled</a> </li>
    </ul>
  </div>
</nav>

Answer 2

The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" 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" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100 order-0">
        <div class="w-100">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <a class="navbar-brand text-center w-100" href="#">Navbar</a>
        <span class="w-100"></span>
    </div>
    <span class="w-100"></span>
</nav>

Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi

Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items