Styling Search Inputs with Icons in Bootstrap
Bootstrap 4 has eliminated support for glyphicons, but there are still ways to incorporate icons into search inputs. Here are a few approaches:
Using Input Groups:
<div class="input-group"> <input class="form-control border-end-0 border rounded-pill" type="text" value="search">
<div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search">
Positioning the Icon Inside the Input:
<input class="form-control py-2 border-right-0 border" type="search" value="search">
Using Input Group Text without Background:
<input class="form-control py-2 border-right-0 border" type="search" value="search">
Other Options:
<div class="row no-gutters"> <div class="col"> <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">
<div class="input-group"> <span class="input-group-prepend"> <div class="input-group-text bg-transparent border-right-0"> <i class="fa fa-search"></i> </div> </span> <input class="form-control py-2 border-left-0 border" type="search" value="...">
The above is the detailed content of How to Style Search Inputs With Icons in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!