Bootstrap 4 Center searchbar in navbar - html

Question

I am trying to centre my search bar inside my navbar. Currently, I have it aligned to the left, But I'm trying to get it in the middle of the navbar.
This is the HTML code I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom">
<a class="navbar-brand" href="#">ICT-Hulp(Waarschijnelijk logo)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<div class="justify-content-md-center">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Zoeken..." aria-label="Search" style="width: 600px;">
<button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
I Can't get the search bar centred. I can't find it on the bootstrap site either because its very vague

Answer 1

Add ml-auto class to navbar-nav along with mr-auto

Answer 2

You can add margin-left: auto by adding mr-auto to navbar to center the searchbar in the navbar. But it won't be at the center of the header, since there is another component beside the navbar.
<ul class="navbar-nav mr-auto ml-auto">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom">
<a class="navbar-brand" href="#">ICT-Hulp(Waarschijnelijk logo)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item">
<div class="justify-content-md-center">
<form class="form-inline my-2 my-lg-0 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Zoeken..." aria-label="Search" style="width: 600px;">
<button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</li>
</ul>
</div>
</nav>