How to use html datalist with bootstrap?

Given

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

How to apply bootstrap css to this? I would except just to add class="form-control" and it would be layouted in the same fasion as a select element? But that did not work. Is this tag not supported?

Solution

I cannot confirm, that bootstrap 4 does generally not work with the <input>/<datalist> element. Basically you only apply the select field bootstrap classes to the input field, which then gets the look of a select/dropdown with input functionality, e.g.:

<input list="encodings" value="" class="col-sm-6 custom-select custom-select-sm">
<datalist id="encodings">
   <option value="ISO-8859-1">ISO-8859-1</option>
   <option value="cp1252">ANSI</option>
   <option value="utf8">UTF-8</option>
</datalist>

Looks like that on recent Firefox: