Bootstrap selectpicker does not show options

Question

I have the below simple code that is not working properly. In fact I'm trying to use bootstrap-select - Silvio Moreto in my project. It's not showing the options when I click on it. I narrowed the code to the basic example given by the author but still the same issue.

My code:

 $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-fr_FR.min.js"></script> <select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

Here is what I'm getting:

Answer 1

Because you are not including the bootstrap default CSS and JS files add them and it will work see below demo with the minimum set of files that you need to run. I used bootstrap 3 as you didn't mention what version you are using if you are using the bootstrap 4 you can add the popper.min.js umd version.

 $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-en_US.js"></script> <select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>