Bootstrap 4 Search Box with Icon

Bootstrap 4 Search Box with Icon
Code Snippet:bootstrap-4-search-box-with-icon
Author: Güngör Budak
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 29,290
License: MIT
Edit Code online: CodeHim
Read More

This code snippet helps you to create a Bootstrap 4 search box with an icon. You can place any Font Awesome icon inside the text input with the help of this example code.

How to Create Bootstrap 4 Search Box with Icon

1. First of all load the Bootstrap and Font Awesome CSS into your HTML document.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

2. Create HTML structure for a search box as follows:

  <!-- Actual search box -->
  <div class="form-group has-search">
    <span class="fa fa-search form-control-feedback"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div>
  
  <!-- Another variation with a button -->
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search this blog">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>

3. Finally, style your search box with CSS.

/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

That’s all! I hope you are able to create a search box with an icon. If you need any further help, let me know by comment below.

3 thoughts on “Bootstrap 4 Search Box with Icon”

    • Hi Edina,
      You need to attach that search box to backend to make it fully functional. Basically, a search box used to submit query to server, on server-side we use that query to get data from database and display it on search result page. Do you need backend functionality to make your search box functional?

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X