How To Put Form Element (search Bar) Into The Center Of The Navbar?

Solution 1:

If you are trying to center all the elements in the navbar, you can do that by using the justify-content-center class in the nav

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"rel="stylesheet" /><navclass="navbar navbar-light bg-light justify-content-center"><aclass="navbar-brand"href="#"><imgsrc="/docs/4.4/assets/brand/bootstrap-solid.svg"width="30"height="30"class="d-inline-block align-top"alt="">Bootstrap</a><divclass="d-flex"><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

If you are trying to move the search block to the middle of the navbar, you could add an empty div to the end of the nav block, and add the justify-content-between class to the nav element.

Disclaimer: This is not a very clean solution

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"rel="stylesheet" /><navclass="navbar navbar-light bg-light justify-content-between"><aclass="navbar-brand"href="#"><imgsrc="/docs/4.4/assets/brand/bootstrap-solid.svg"width="30"height="30"class="d-inline-block align-top"alt="">Bootstrap</a><divclass="d-flex"><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div><div></div></nav>

Solution 2:

You should be able to review this website https://hackerthemes.com/bootstrap-cheatsheet/ and see the different types of navbar available, and understand the structure to move the search engine in the HTML.

Share