Search input with an icon Bootstrap

Question

No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?

This is my code so far:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">    <div class="form-group col-md-4">    <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">  </div>  <!-- /.form-group -->

I want to use this font-awesome icon. And I've tried adding it as a background-image too, as in:

.form-control {   background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');   background-position: right center 5px; } 

But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!

Answer 1

Bootstrap 5 Beta - (update 2021)

     <div class="input-group">             <input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">             <span class="input-group-append">                 <button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">                     <i class="fa fa-search"></i>                 </button>             </span>      </div> 

Demo

Bootstrap 4 (original answer)

Why not use an input-group?

<div class="input-group col-md-4">       <input class="form-control py-2" type="search" value="search" id="example-search-input">       <span class="input-group-append">         <button class="btn btn-outline-secondary" type="button">             <i class="fa fa-search"></i>         </button>       </span> </div> 

And, you can make it appear inside the input using the border utils...

        <div class="input-group col-md-4">             <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">             <span class="input-group-append">               <button class="btn btn-outline-secondary border-left-0 border" type="button">                     <i class="fa fa-search"></i>               </button>             </span>         </div> 

Or, using a input-group-text w/o the gray background so the icon appears inside the input...

        <div class="input-group">             <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">             <span class="input-group-append">                 <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>             </span>         </div> 

Alternately, you can use the grid (row>col-) with no gutter spacing:

<div class="row no-gutters">      <div class="col">           <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">      </div>      <div class="col-auto">           <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">              <i class="fa fa-search"></i>           </button>      </div> </div> 

Or, prepend the icon like this...

<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="..." id="example-search-input" />   <span class="input-group-append">     <button class="btn btn-outline-secondary border-left-0 border" type="button">      Search     </button>   </span> </div> 

Demo of all Bootstrap 4 icon input options

---

---

Example with validation icons

Answer 2

I made another variant with dropdown menu (perhaps for advanced search etc).. Here is how it looks like:

<div class="input-group my-4 col-6 mx-auto">     <input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">     <span class="input-group-append">         <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">             <span class="sr-only">Toggle Dropdown</span>         </button>         <button class="btn btn-outline-primary rounded-right" type="button">             <i class="fas fa-search"></i>         </button>         <div class="dropdown-menu dropdown-menu-right">             <a class="dropdown-item" href="#">Action</a>             <a class="dropdown-item" href="#">Another action</a>             <a class="dropdown-item" href="#">Something else here</a>             <div role="separator" class="dropdown-divider"></div>             <a class="dropdown-item" href="#">Separated link</a>         </div>     </span> </div> 

Note: It appears green in the screenshot because my site main theme is green.