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!

Carol Skelly · Accepted Answer · 2021-05-21T14:54:46.243

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

I tried option 3 and got this warning: Div cannot be nested inside span — Hooman Bahreini, May 23 '18 at 00:13
also issue with input box radius, check this css in bootstrap 4. .input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } — Lalitkumar Tarsariya, Jul 25 '18 at 06:19
I would like to know how have the icon in the case I moved the span from right to left( I give the main div the input-group-prepend class), but I do have a simple box instead of the icon — Carmine Tambascia, Aug 14 '18 at 13:24
In Twitter Bootstrap 5 .input-group-append and .input-group-prepend is deprecated. You can now add buttons as direct children of the input groups: https://getbootstrap.com/docs/5.1/migration/#forms — kimomat, Oct 04 '22 at 13:23

Rosdi Kasim · Answer 2 · 2019-03-08T01:31:28.337

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.

zeros-and-ones · Answer 3 · 2018-02-27T23:49:50.683

2

Here is an input box with a search icon on the right.

  <div class="input-group">
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
      <div class="input-group-append">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
  </div>

Here is an input box with a search icon on the left.

  <div class="input-group">
      <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
  </div>

edited Feb 27 '18 at 23:49

answered Feb 27 '18 at 23:18

zeros-and-ones

4,227
6
35
54

Sorry about hijacking another post to do this. Your recent question about using casts with Pivot models in Laravel is absolutely possible (I was about to add an answer but then the question got deleted). Please can you re add the question and I'll add the answer. Are you using Laravel >=5.5 by the way? – Rwd Aug 16 '18 at 06:18
Looing forward to seeing you answer! I un-deleted the original question! https://stackoverflow.com/questions/51869877/laravel-model-mutator-not-working-when-using-attach-to-save-on-pivot-table?noredirect=1#comment90692255_51869877 – zeros-and-ones Aug 16 '18 at 19:12

score 1 · Answer 4 · answered Nov 02 '19 at 05:51

Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.

Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.

Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search"> as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.

Here is the needed Bootstrap markup.

<div class="position-relative">
    <i class="fa fa-search position-absolute"></i>
    <input class="form-control" type="search">
</div>

...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:

i {
    font-size: 1rem;
    color: #333;
    top: .75rem;
    left: .75rem
}

input {
    padding-left: 2.5rem;
}

You may have to fiddle with the values for top, left, and padding-left.

score 1 · Answer 5 · answered Jan 23 '23 at 12:45

It is also possible with position-absolute in Bootstrap 5:

<form class="d-flex flex-row position-relative">
    <input type="search" class="form-control" id="example-search-input">

    <button class="btn btn-outline-success border-0 position-absolute end-0" type="submit">
        <i class="fa fa-search"></i> Search
    </button>
</form>

Patricio Moraga · Answer 6 · 2018-01-21T15:33:57.933

0

in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)

<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
        <i class="ICON-copyright"></i>
    </asp:LinkButton>
</div>

edited Jan 21 '18 at 15:33

answered Jan 21 '18 at 15:26

Patricio Moraga

39
3

score 0 · Answer 7 · answered Feb 04 '23 at 12:17

With Bootstrap 5 and bootstrap-icons library:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search"
         aria-describedby="button-addon">
  <button class="btn btn-outline-secondary" type="button" id="button-addon"><i class="bi bi-search"></i></button>
</div>

score -2 · Answer 8 · edited Feb 25 '18 at 21:29

-2

you can also do in this way using input-group

<div class="input-group">
  <input class="form-control"
         placeholder="I can help you to find anything you want!">
  <div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>

codeply

edited Feb 25 '18 at 21:29

Carol Skelly

351,302
90
710
624

answered Aug 15 '17 at 16:05

Aniruddha Das

20,520
23
96
132

1

Nice job forking the Codeply I had posted – Carol Skelly Aug 15 '17 at 17:18
2

Icon is pushed outside, needs to be ```

``` – zeros-and-ones Feb 27 '18 at 23:17

Search input with an icon Bootstrap

8 Answers8

Linked

Related