html – Bootstrap 5 Form Floating and Adding Close Buttons / ‘x’ Clear Text Icons in Form Control Input Fields

With Bootstrap 5 I would like to add a close button to create floating and form input fields so that users can easily clear text on mobile, but it is not working as expected. I am following a simple ‘x’ at the top right that will show up after text input, as shown in the search field in this example.

Minimal reproduction of examples from documents with the close button that I expected to work:

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
</div>
<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="name@example.com">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</html>

What am i doing wrong

I’m probably doing something stupid. But I can’t find an example of this for Bootstrap 5, so please forgive the dumb question.

Leave a Reply

Your email address will not be published.