bootstrap-select not working with boostrap 4.1

Question

I'm using bootstrap 4.1 and I want to make one select input searchable with boostrap-select js - https://github.com/silviomoreto/bootstrap-select

For the tests i tried with

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

and initialize with $('.selectpicker').selectpicker(); I add the library 1.12.4/js/bootstrap-select.min.js after the jquery and boostrap.js libraries

When I click on the select box, It is showing like this -

What could be the problem?

The plugin was updated for Bootstrap 4 https://stackoverflow.com/questions/41573624/bootstrap-4-styled-select — Carol Skelly, Dec 03 '19 at 12:50

score 0 · Answer 1 · answered Apr 30 '18 at 19:10

0

Because bootstrap select Work with bootstrap 3. And there is so many major changes in between bootstrap 3 and 4. But you can download only bootstrap 3.* drop down CSS and js from https://getbootstrap.com/docs/3.3/customize/ and add to your project

answered Apr 30 '18 at 19:10

patelarpan

7,188
2
20
25

score 0 · Answer 2 · answered Apr 30 '18 at 19:33

See this fiddle DEMO

$('.selectpicker').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

The bootstrap select, works with Bootstrap v. 3 See this link support

bootstrap-select not working with boostrap 4.1

2 Answers2