Bootstrap 4 Center searchbar in navbar

user_7301337 0
Viewed 9045

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

twitter-bootstrap css html
2 Answers

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

user_82478500

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>

user_27594820
Related