Put Search Icon Near Textbox Using Bootstrap

Search input with an icon Bootstrap

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

Sample Image

Example with validation icons

Put search icon near textbox using bootstrap

Here are three different ways to do it:

screenshot

Here's a working Demo in Fiddle Of All Three

Validation:

You can use native bootstrap validation states (No Custom CSS!):

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box

Input Group:

You can use the .input-group class like this:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box

Unstyled Input Group:

You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.

Use a normal input group but add the class input-group-unstyled:

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Then change the styling with the following css:

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

Also, these solutions work for any input size

Search input with an icon Bootstrap 4 with rounded textbox

Here's a Bootstrap only solution...

Use the negative margin utils to slide the button to the left:

 <div class="input-group">
     <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
     <span class="input-group-append">
         <button class="btn rounded-pill border-0 ml-n5" type="button">
               <i class="fa fa-search"></i>
         </button>
     </span>
 </div>

This also works using input-group-text, or using the grid col-auto method explained in my other answer:

    <div class="row no-gutters mt-3 align-items-center">
        <div class="col-4">
            <input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>

https://www.codeply.com/go/cDQQcNY8kP

Put search Icon inside text box

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

Search icon goes below form input

I've just solve it. The solution is to:

  1. change in html d-block to d-flex
  2. add
.mobile-border {
        justify-content: space-between;
        flex-flow: row nowrap;
}

  1. and remove float-right from mobile-search-icon

Add Bootstrap Glyphicon to Input Box

Without Bootstrap:

We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon.

So for the following HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

You can use the following CSS to left and right align glyphs:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

css screenshot

Note: This presumes you're using glyphicons, but works equally well with font-awesome.

For FA, just replace .glyphicon with .fa

With Bootstrap:

As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the .form-group element the class of .has-feedback and the icon the class of .form-control-feedback.

The simplest example would be something like this:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Pros:

  • Includes support for different form types (Basic, Horizontal, Inline)
  • Includes support for different control sizes (Default, Small, Large)

Cons:

  • Doesn't include support for left aligning icons

To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide:

Just include the these form changes in css (also inlined via hidden stack snippet at the bottom)
*LESS: alternatively, if you are building via less, here's the form changes in less

Then, all you have to do is include the class .has-feedback-left on any group that has the class .has-feedback in order to left align the icon.

Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo.

Here's a demo in Plunker

feedback screenshot

P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap

Didn't find what you were looking for? Try these similar questions:

  • Add Twitter Bootstrap icon to Input box
  • Put search icon near textbox bootstrap

Addition CSS for Left Aligned feedback icons

.has-feedback .form-control {  padding-right: 34px;}.has-feedback .form-control.input-sm,.has-feedback.form-group-sm .form-control {  padding-right: 30px;}.has-feedback .form-control.input-lg,.has-feedback.form-group-lg .form-control {  padding-right: 46px;}.has-feedback-left .form-control {  padding-right: 12px;  padding-left: 34px;}.has-feedback-left .form-control.input-sm,.has-feedback-left.form-group-sm .form-control {  padding-left: 30px;}.has-feedback-left .form-control.input-lg,.has-feedback-left.form-group-lg .form-control {  padding-left: 46px;}.has-feedback-left .form-control-feedback {  left: 0;}.form-control-feedback {  line-height: 34px !important;}.input-sm + .form-control-feedback,.form-horizontal .form-group-sm .form-control-feedback {  width: 30px;  height: 30px;  line-height: 30px !important;}.input-lg + .form-control-feedback,.form-horizontal .form-group-lg .form-control-feedback {  width: 46px;  height: 46px;  line-height: 46px !important;}.has-feedback label.sr-only ~ .form-control-feedback,.has-feedback label.sr-only ~ div .form-control-feedback {  top: 0;}@media (min-width: 768px) {  .form-inline .inline-feedback {    position: relative;    display: inline-block;  }  .form-inline .has-feedback .form-control-feedback {    top: 0;  }}.form-horizontal .has-feedback-left .form-control-feedback {  left: 15px;}

Add a Search icon in the end of a input-group IN bootstrap 3

Try this..

.input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
 box-shadow:none;
 -webkit-box-shadow:none; 
 border-color:#cccccc; 
}

You may want to use a special CSS class instead of overriding all of the input-groups

Demo: http://bootply.com/86446

How to add search icon in a textbox using bootstrap

What you need to do is create a button and input next to each other in a form and then using CSS absolutely position the button on top of the form.

Style the button (bootstrap includes a number of useful icons) to look like the magnifying glass and there you go!

-Edit-

Some example code, as I'm feeling generous.

<div id="form-master">
<form method="post">
    <div id="search-box">
        <input type="text" name="search" />
    </div>

    <div id="search-button">
        <input type="submit" name="run" />
    </div>
</form>
</div>

And the CSS:

#form-master {
position: relative;
width: 200px;
height: 30px;
}

#search-box {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 190px;
height: 20px;
padding: 5px;
}

#search-button {
position: absolute;
top: 5px;
right: 5px;
z-index: 5;
border: none;
width: 25px;
height: 25px;
background: url('magnifier.png') top no-repeat;
}

That's very rough, but in the right direction.

How to add Search Icon next to my label?

Try to make use of input-group component of bootstrap4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="container">  <div class="row">    <div class="col-6">      <div class="form-group">        <label>Username</label>        <div class="input-group">          <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">          <div class="input-group-append">            <button class="btn btn-outline-secondary" type="button">Go</button>          </div>        </div>      </div>    </div>  </div></div>

Related Topics

Favicon Standard - 2022 - Svg, Ico, Png and Dimensions

How to Replace The File Browse Button in HTML

CSS Vertical Align

Play Flv in HTML

Will Targeting Ie8 with Conditional Comments Work

How to Horizontally Center an Absolute Positioned Element Inside a 100% Width Div

R Shiny Selectedinput Inside Renderdatatable Cells

How to Transform Each Side of a Shape Separately

Websocket Server Implementations for Delphi

Adding Custom Fonts to Github Pages

String Attribute Values in Multiple Lines, HTML

How to Check If The Browser Can Play Mp4 via HTML5 Video Tag

"Attribute Name Not Allowed on Element Div at This Point"

CSS Triangle Containing Text

Block Level Elements Inside Inline Elements

Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative

Change Image on Hover

How to Nest Form Tags in Other Form Tags


Leave a reply



Submit