This is a basic design of search box for bootstrap but yet it is efficient enough to serve our purpose. For a website search box is an essential component, so it’s very important to be simple yet styles correctly to match your website. This uses bootstrap 4 and font awesome CSS files. In HTML .input-groups are used, which is class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text", along with this you can use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input. Here to search we are using .has-search which is not in Bootstrap 4. Check out the CSS styling for the search button. This design is ideal to have it on a page. To have it on the header you will have to tweak it a bit.