Google Custom Search Engine (CSE) is a great service when you need to implement a search functionality to a website and do not spend too much time. However, the default way of implementing it restricting us to have a certain search box design that might not blend well to our website. In this post, I’ll show how I found a workaround solution and actually implement on this very blog. To see the solution in action, feel free to search anything on the search box at the top of the right sidebar.

Bootstrap 4 is a very handy library to generate quick web user interfaces for web pages and web applications. Search box is a very fundamental UI element if the web page is providing some content and in this post I’ll describe some styles that make a nice text input for search box. To accomplish this, I’ll make use of the default way of form validations in Bootstrap 3 which was removed in Bootstrap 4 because it doesn’t support font icons anymore.