Bootstrap-select jQuery plugin with Bootstrap 4 not working

html bootstrap-4 bootstrap-select bootstrap-selectpicker
Din picture Din · Sep 3, 2018 · Viewed 9.7k times · Source

Why is Bootstrap-select not working properly with Bootstrap 4? Here is the code, It is displaying the search input button and the options separately as two separate buttons.

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Answer

Johann-S picture Johann-S · Sep 3, 2018

If you update bootstrap-select CSS and JS to 1.13.1 it'll works perfectly 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

See: https://jsfiddle.net/w483cygx/

Related questions

Bootstrap 4 multiselect dropdown

I read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4. Unfortunately I am unable to display the multiselect as in (bootstrap 3) in (bootstrap 4). Bootstrap 3 Snippet Bootstrap 4 Snippet $('select').selectpicker(); &…

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More
how to make a whole row in a table clickable as a link?

I'm using Bootstrap and the following doesn't work: <tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr&…

Read More