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=".1.1/jquery.min.js"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".12.4/css/bootstrap-select.min.css">
<!-- Latest piled and minified JavaScript -->
<script src=".12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src=".12.4/js/i18n/defaults-fr_FR.min.js"></script>

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<!-- Latest piled and minified JavaScript -->
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare./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:

• javascript
• bootstrap-select

• you basic example does not work – Muhammad Omer Aslam Commented Jun 22, 2018 at 2:11

1 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

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

<!-- (Optional) Latest piled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare./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>