How to Style Search Inputs With Icons in Bootstrap?

Mary-Kate Olsen
Release: 2024-11-12 13:41:01
Original
991 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
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
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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template