Bootstrap Search Box: 3 Free Responsive Templates

Updated on: Jan 19 2021 by Anli

Bootstrap Search Box: 3 Free Responsive Templates

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

Template 1

Fixed transparent top menu / navbar, search form on the right.

Bootstrap Search Box Template 1

Template 2

Dark top menu / navbar, full-width search bar.

Bootstrap Search Box Template 2

Template 3

White top menu / navbar, search field on the right.

Bootstrap Search Box Template 3

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).

In the templates I have also used some Javascript (jQuery) for the search bar’s behaviour and for the fullscreen background. You can find this code in the “scripts.js” file (assets/js).

The images are located in the “img” folder (assets/img). The favicon and the Apple touch icons are in the “ico” folder (assets/ico).

Demo, Download and License


DOWNLOAD: Bootstrap Search Box Templates (7843 downloads )


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.

Marco: Bootstrap Multi-purpose Landing Page

Marco Template: Login Forms

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.