How to put a Search Icon / Button inside an input with Bootstrap?

Question

How to put a Search Icon / Button inside an input with Bootstrap?

Navigation

#1 by (4 votes)

2

<form class="form-inline my-2 my-lg-0 pl-3-lg">

    <input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search">
    <button class="btn btn-dark ml-1" type="submit">
      <img src="img/searchIcon.png">
    </button>

</form>

Instead of getting a button next to input , I wanted it to have a search icon inside input , using bootstrap, how do I do this?

Example:

html css bootstrap-4

asked by anonymous 07.09.2018 / 19:31

1 answer

Code before or after super How to implement an abstract method with a generic class in C #

score 4 · Accepted Answer

This would be an option, but you'll have to do the "style" for the search icon to be in the color of <input> :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="col-sm-3 my-1">
  <div class="input-group">
    <input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search" style="border-right: none;">
    <div class="input-group-append">
      <div class="input-group-text" style="background-color: #FFF"><i class="fas fa-search"></i></div>
    </div>
  </div>
</div>