How to Add Icons to Search Input Fields with Bootstrap?

Search Input Field with Icon Bootstrap

In this modern era of Bootstrap 5 and beyond, customizing search input fields with icons has become a breeze. Let's dive into two primary approaches to incorporate icons into your search inputs.

Bootstrap 5 Beta

Bootstrap 5 provides us with the input-group class, which seamlessly integrates with input fields. Here's how you can use it:

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4 (Original Answer)

If you're working with Bootstrap 4, consider using the input-group class as well:

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Additional Options for Bootstrap 4:

• Border Manipulation: Use Bootstrap utility classes like border-right-0 or border-left-0 to create inputs where the icon seemingly floats inside the field.
• Input Group Text: Utilize input-group-text with a transparent background to achieve the same effect.
• Grid System: Leverage the grid system (row and col) with no gutter spacing to create seamless transitions between the input and the icon.

The above is the detailed content of How to Add Icons to Search Input Fields with Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!