Adding a search box with an icon inside your website is a great way to enhance the search experience. This Bootstrap 5 code snippet helps you to create a search box with an icon inside. It places search icons inside the input field or the button for enhanced user interaction.
These search boxes help users quickly find information on your site. Moreover, the search boxes are customizable to match your website’s design.
How to Create Bootstrap 5 Search Box With Icon Inside
1. First, you need to include the Bootstrap 5 and Font Awesome CSS files in your HTML document. These libraries will provide the necessary styles and icons for our search box.
<!-- Bootstrap 5 CSS --> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/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. Next, we’ll create the HTML structure for our search boxes. We’ll include two types of search boxes: one with an icon inside the input field and another with an icon button.
<div class="container">
<!-- search box with icon inside -->
<div class="input-group mb-3">
<span class="input-group-text"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search-box" placeholder="Search">
</div>
<!-- search box with iconic button -->
<div class="input-group mb-3">
<input type="text" class="form-control search-box" placeholder="Search this blog">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
3. You can add custom styles to the search boxes using CSS. Below is an example of how to style the search box. For example, you can add the border, background color, or text color of the search box.
.search-box{
/* Your custom styles for search box */
}
That’s all! hopefully, you have successfully created a Search Box with an icon inside. If you have any questions or suggestions, feel free to comment below.
