2

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>
Sumesh TG
  • 2,557
  • 2
  • 15
  • 29
Din
  • 505
  • 4
  • 11
  • 21
  • It is due to version conflict please refer .https://stackoverflow.com/questions/40757224/data-live-search-style-data-attribute-is-not-working-in-bootstrap-select-js – Sumesh TG Sep 03 '18 at 13:37

2 Answers2

5

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/

Johann-S
  • 1,181
  • 1
  • 10
  • 10
2

The issue with your JSFiddle was an incorrect CSS version in the link tag. The CSS network request was throwing 404 not found since no such version exists on cdnjs CDN. Changed the version number from 1.13.2 to 1.13.1 and it works perfectly. Check the JSFiddle

https://jsfiddle.net/35go2hp1/

<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>
cdoshi
  • 2,772
  • 1
  • 13
  • 20