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
Official website: Go to website
Published: 11 months ago
Views: 7,568

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=''>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href=''>

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">
  <!-- 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>

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.

1 Comment

Leave a Reply

Your email address will not be published.


three × one =

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