Bootstrap 4 multiselect dropdown

Question

I have 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 multi select while using bootstrap 3 in bootstrap 4. Have shared my snippets below:-

Bootstrap 3 Snippet

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js">
</script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 

</select>

 

Bootstrap 4 Snippet

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
</select>

Answer 1

Due to the reason being that the bootstrap-select is a Bootstrap component and therefore you need to include it in your code as you did for your V3. However, please keep in mind that this component only works in bootstrap-4 since version 1.13.0

$('select').selectpicker();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
  <option>Ketchup</option> 
  <option>Relish</option> 
</select>