Home  >  Article  >  Web Front-end  >  How to Style Search Inputs With Icons in Bootstrap?

How to Style Search Inputs With Icons in Bootstrap?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-12 13:41:01947browse

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">
  • Bootstrap 4:
<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:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn