Do you want to use Bootstrap search form in your WordPress theme to make your search field looks good and use search icon as submit the search query?
Then you came at right place.
Here:
We’ve posted the code snippets that will make your WordPress search form field cool by using CSS and applying bootstrap as well as font awesome icon (search icon).
Sounds good?
Let’s go.
Files that are needed
1-A: Download Bootstrap 3 (If you want to use V3 Bootstrap)
1-B: Download Bootstrap 4 (If you want to use V3 Bootstrap)
2: Include Bootstrap CSS file in your WordPress Theme, if not included before.
3: Download & include FontAwesome CSS file on your theme too.
How to Add the Bootstrap Search Form to WordPress
We have made this guide really simple just follow the below steps and your attractive WordPress search bar with bootstrap will be ready within few minutes.
This guide devided into 2 section:
- Bootstrap 3 Search Form for WP
- Bootstrap 4 Search Form for WP
let’s begin with Bootstrap 3
Bootstrap 3 Search Form with Search icon
Below are few lines of code that will add the search field into your theme and with applying the class of Bootstrap and with the button of search. isn’t it awesome?
We have also posted the CSS code that will help you to make simple but attractive search form. let’s take a look.
PHP & HTML Code of Search Field
Copy the below code and create the PHP file name searchform.php inside the folder of your’s WordPress theme. Paste the whole copied code and save the file.
Basic Style the Search Field with CSS Code
Copy the below CSS code into your WordPress theme’s style.css file and save.
Bootstrap 4 Search Form with Search icon
Steps same as the above Bootstrap 3:
Copy the below code and paste it into your searchform.php file.
Hope your bootstrap awesome looking search bar is ready to use
Hope the above code helped you.
Don’t forget to share this guide: Bootstrap Search with Icon in WordPress.