title: Bootstrap Multiple select dropdown list not showing as expected?
body: <p>I wanted to have a dropdown list from which a user can select multiple options. After some research I found bootstrap multiple select component from <a href="https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections" rel="nofollow noreferrer">this</a> website.  The code below is what I copied from the website. However, it does't look like a dropdown list as shown in the screen shot below. I searched a lot but didn't find any good solution. </p>
  
  <p>The code I have copied from <a href="https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections" rel="nofollow noreferrer">this</a> website: </p>
  
  <pre><code>&lt;select class="selectpicker" multiple title="Choose one of the following..." data-max-options="2"&gt;
      &lt;option&gt;Mustard&lt;/option&gt;
      &lt;option&gt;Ketchup&lt;/option&gt;
      &lt;option&gt;Relish&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Script part:</p>
  
  <pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
         $(document).ready(function () {
             $('.selectpicker').selectpicker();
      })
     &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>Actual result:</em></strong> </p>
  
  <p><a href="https://i.stack.imgur.com/nNQZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nNQZs.png" alt="enter image description here"></a></p>
  
  <p><strong><em>Expected result:</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/9ZDEN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZDEN.png" alt="Expected result"></a></p>
  
  <p>Thank you</p>