Bootstrap 5 Search Box With Icon

This code provides two variations of a search box with icons using Bootstrap 5. The first variation features an icon inside the search box, while the second variation includes an icon within a button. The HTML code includes the necessary structure and classes, while the CSS code adds the required styling for the icons. Feel free to use this code to enhance your website’s search functionality with a visually appealing design.

How to Create Bootstrap 5 Search Box with Icon

First of all, load the Bootstrap 5 CSS and Font Awesome CSS (for icons) by adding the following CDN links into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.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'>

Now, simply copy and paste the respective HTML code into your project. The first variant places the search icon inside the input field, while the second variant displays a search button with the icon alongside the input field.

Make sure to include the necessary CSS code to ensure proper alignment and styling of the search box and icon elements.

Variant 1: Search box with icon inside.

<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search">
</div>

Variant 2: Search box with icon in 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>

Style the search box using the following CSS styles:

/* Styles for wrapping the search box */

.main {
    width: 50%;
    margin: 50px auto;
}

/* Bootstrap 5 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! hopefully, you have successfully created a Bootstrap 5 Search Box With Icon. If you have any questions or suggestions, feel free to comment below.