Solution 1 :

<div class="input-group position-relative d-inline-flex align-items-center">
            <input class="form-control " formControlName="textInput" type="text" value="">
            <i class="bi bi-search position-absolute" 
              right: 10px;
              cursor: pointer;
              z-index: 100;">

Solution 2 :

“I’m after a simple ‘x’ on the right end that’ll show after text
input, as shown in the search field in this example.”

The ‘X’ is that example is simply a search type input…

<div class="form-floating mb-3">
  <input type="search" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>

Or, use an input group as explained in this similar question

            <label for="exampleFormControlInput2" class="form-label">Email address</label>
            <div class="input-group">
                <input class="form-control border-end-0 border" type="email" placeholder="[email protected]" id="exampleFormControlInput2">
                <span class="input-group-append">
                    <button class="btn btn-white border-start-0 border" type="button">
                        <i class="bi bi-search"></i>


Problem :

With Bootstrap 5 I’d like to add a close button to form floating and form control input fields so users can easily clear text on mobile, but it’s not working as expected. I’m after a simple ‘x’ on the right end that’ll show after text input, as shown in the search field in this example.

Minimal reproduction of examples from docs with the close button I expected to work inserted:

<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">

<script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>

What am I doing wrong?

I might be doing something stupid, but I can’t find any examples on this for Bootstrap 5, so please forgive the dumb question.


Comment posted by Abin Thaha

I guess you might need to add that manually. I don’t came across any official docs from bootstrap providing that functionality.

Comment posted by for_all_intensive_purposes

This code doesn’t seem to show “x” nor can I find

Comment posted by HTML5 search input

Yes it does show the X when you enter text in the input. It’s the standard

Comment posted by for_all_intensive_purposes

Chrome adds the x, other browsers don’t. How can we enforce the x when using Bootstrap?