Today’s free web design resource is a pack of three Bootstrap search box templates. These are some simple search forms with a text input field that you can add to the top menu or navbar of a website.
This type of search bar can be hidden and shown with the click of a button. It is beautiful because it comes with some nice CSS3 animations, and it is also useful and practical because it adds a search function to the website without occupying any space in the menu.
Below you can find the live preview and download links. Enjoy!
The 3 Search Box Templates
Fixed transparent top menu / navbar, search form on the right.
Dark top menu / navbar, full-width search bar.
White top menu / navbar, search field on the right.
How To Use The Templates
Download the zip package below and extract it. Each template / layout is in its folder called “layout 1”, “layout 2”, etc.
Use the “index.html” file to modify the HTML code. The style can be changed from the “style.css” file in the “css” folder (assets/css).
The images are located in the “img” folder (assets/img). The favicon and the Apple touch icons are in the “ico” folder (assets/ico).
I’ve created a simple logo with Photoshop here and it looks good, but I think with a little more work or by hiring a logo designer, it could look even better.
If you choose the hiring route, I recommend Fiverr, you can find some good designers there.
Demo, Download and License
You can use these search bar templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.
Want more? Try Marco!
It comes with 15+ different layouts / templates and 30+ forms.