Autocomplete

Examples and usage guidelines for form autocomplete styles, layout options, and custom components for creating a wide variety of forms.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Outline Form Autocomplete

Wrap <input class="form-control"> and <label> in .form-floating .form-floating-outline to enable floating label Outline with Bootstrap’s textual form fields.

Datalist example

We'll never share your details with anyone else.

<div class="form-floating form-floating-outline">
  <input type="text" class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." aria-describedby="floatingInputHelp" fdprocessedid="qhxhn">
  <datalist id="datalistOptions">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>
  <label for="floatingInput">Datalist example</label>
  <div id="floatingInputHelp" class="form-text">We'll never share your details with anyone else.</div>
</div>

Filled Form Autocomplete

Wrap <input class="form-control">, <label> and <span class="form-floating-focused"> in .form-floating to enable floating label Filled with Bootstrap’s textual form fields.

Datalist example

We'll never share your details with anyone else.

<div class="form-floating">
  <input type="text" class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." aria-describedby="floatingInputFilledHelp" />
  <datalist id="datalistOptions">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>
  <label for="floatingInputFilled">Datalist example</label>
  <span class="form-floating-focused"></span>
</div>
<div id="floatingInputFilledHelp" class="form-text">We'll never share your details with anyone else.</div>

Default Form Autocomplete

Default input style with .form-text.

Datalist example

We'll never share your details with anyone else.

<div>
  <label for="defaultFormControlInput" class="form-label">Datalist example</label>
  <input type="text" class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." aria-describedby="defaultFormControlHelp" />
  <datalist id="datalistOptions">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>
  <div id="defaultFormControlHelp" class="form-text">We'll never share your details with anyone else.</div>
</div>