How to Style Search Inputs With Icons in Bootstrap?-CSS Tutorial-php.cn

How to Style Search Inputs With Icons in Bootstrap?

Mary-Kate Olsen

Release： 2024-11-12 13:41:01

Original

1020 people have browsed it

How to Style Search Inputs With Icons in Bootstrap?

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:

Bootstrap 5:

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

Copy after login

Bootstrap 4:

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

Copy after login

Positioning the Icon Inside the Input:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Copy after login

Using Input Group Text without Background:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Copy after login

Other Options:

Grid System:

<div class="row no-gutters">
  <div class="col">
    <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

Copy after login

Prepend Icon:

<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="...">

Copy after login

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!