Bootstrap 4 - Navbar searchbar center
Question
I'm currently struggling a bit on centring my search bar inside my nav. I've tried many different things, like mr-atuo and ml-auto or mx-auto but I just can't get the element to move. I don't want to use individual pixels because then it will look horrible on mobile. Here is a small demonstration of where the bar needs to be and where it currently is: https://imgur.com/a/bHXJD
Here is the code for my navbar:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://use.fontawesome.com/0ba2bca7b4.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom z-depth-half"> <div class="container"> <a class="navbar-brand" href="#"> <i class="fa fa-skype"></i> </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"> <a href="#" class="nav-link">Vragen</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Aanbieders</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item" style="border-right: 0.1rem solid lightgrey"> <form class="form-inline"> <input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search"> <button class="btn btn-search my-2 my-sm-0 " type="submit"> <i class="fa fa-search"></i> </button> </form> </li> <li class="nav-item"> <a class="nav-link" href="">Aanmelden</a> </li> <li class="nav-item"> <a class="nav-link btn nav-register-btn" href="">Registreren</a> </li> </ul> </div> </div> </nav> </body> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </html>
Thanks in advance!
2 answers
solution1
2 ACCPTED 2017-11-05 13:54:02
You will have to change your HTML structure a bit. Move the form out of the UL
HTML:
...
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search">
<button class="btn btn-search my-2 my-sm-0 " type="submit">
<i class="fa fa-search"></i>
</button>
</form>
<ul class="navbar-nav">
...
CSS:
.form-inline{
width: 100%;
display: flex;
justify-content: center;
}
.form-inline #search{
width: 50%;
}
solution2
0 2017-11-05 13:15:22
One solution would be to assign a min-width to your .form-inline and let the .search-input grow with flex-box:
.form-inline {
min-width: 500px;
}
.search-input {
flex-grow: 3;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.