bootstrap 4 styled select

Question

i would like to display a dropdown / select as an input with bootstrap 4. so far the only select thing i found in the documentation ist this. which works, but does not look

Answer 1

If you are using Bootstrap 4 then you should aware that bootstrap 4 removes the select search box. Now, you can add this features with the help bootstrap-select.min.css file. link is below

firstly you add the following css and javascript file.

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

after that add the following code for select box

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

now you have to add the javascript code

<script>
$('.selectpicker').selectpicker();
</script>

Answer 2

The ability to style/format the select element is limited in general, not just in Bootstrap. That's why there are 3rd party plugins such as https://github.com/silviomoreto/bootstrap-select which utilize jQuery to convert an existing select element to "style and bring additional functionality to standard select elements".

You can also add some simple jQuery to make the Bootstrap dropdown behave like a select element: http://www.codeply.com/go/ganazCDXB5

---

Update 2019 - Bootstap 4

Dropdown as Select: https://www.codeply.com/go/8bAECfv46k

SelectPicker plugin: https://www.codeply.com/go/zpZOlpB4GS

Multiselect plugin: https://www.codeply.com/go/UeqqALYwsT