18

With the latest Bootstrap 4, I am trying to put an x in a search input.

I could simply use

<input type="search" placeholder="Search..." />

But this is not supported in Firefox...

I've tried using addon and negative margins, but somehow the Bootstrap hides my button...

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
        <div class="input-group-addon">
          <button class="btn bg-transparent">
            <i class="fa fa-times"></i>
          </button>
        </div>
</div>

How can I have my x button show up inside the input box aligned right?

Thibs
  • 8,058
  • 13
  • 54
  • 85
  • 1
    This question should be reopened. It is not the same question than the question used for closing it: https://stackoverflow.com/questions/45696685/search-input-with-an-icon-bootstrap Though they are related. – carloswm85 Aug 14 '22 at 01:52

3 Answers3

27

I think that input-group-addon is the problem.

Try this:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

This looks like this:

enter image description here

Tommy
  • 2,355
  • 1
  • 19
  • 48
  • When I paste this code into my page (rendering in Chrome 89.0.4389.90 (Official Build) (x86_64)), there is no `x` although there is something there when I inspect it. Where does the `x` come from? Is it in the end-user class `fa fa-times`? I also tried `` and that's no better. – user1944491 Apr 12 '21 at 19:14
  • The `fa fa-times` are classes from font-awesome, more specifically [Font Awesome 4.7.0](https://fontawesome.com/v4.7.0/get-started/). The easiest way is to import it using a CDN link. Try to add the following line to your `` section: ``. For further information, have a look [here](https://www.w3schools.com/icons/fontawesome_icons_intro.asp). – Tommy Apr 12 '21 at 20:33
6

It would be the same as the methods explained here.

Use a input group and adjust the borders..

  <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">
            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                <i class="fa fa-times"></i>
            </button>
        </span>
  </div>

Use relative position on the button...

 <div class="d-flex">
     <input class="form-control py-2 bg-transparent" type="search" value="search" id="example-search-input">
     <button class="btn btn-outline-secondary border-0 btn-pos" type="button">
         <i class="fa fa-times"></i>
     </button>
 </div>

 .btn-pos {
    position:relative;
    z-index:1;
    left: -36px;
 }

Use a row with columns and adjust the borders..

  <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-times"></i>
            </button>
        </div>
  </div>

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
3

There's an example in the Bootstrap documentation that you could adapt:
https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

e.g.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">X</button>
  </div>
</div>
David Lavender
  • 8,021
  • 3
  • 35
  • 55