title: Using jquery plugin select2 with bootstrap 3
body: <p>I am trying to use <code>select2</code>, but I can't.</p>
  
  <p>I am using the following code in my <code>&lt;head&gt;</code> section:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="select2-bootstrap.css"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and this is my <code>HTML</code> and <code>JS</code> Code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('locationMultiple').select2({
      theme: "bootstrap"
  });
  &lt;/script&gt;
  
  &lt;p&gt;
  &lt;select class="locationMultiple form-control" multiple="multiple"&gt;
    &lt;option value="1d4h7g"&gt;Abondance (74360)&lt;/option&gt;
    &lt;option value="lf9k9d"&gt;Alby-Sur-Cheran (74540)&lt;/option&gt;
    ...
  &lt;/select&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>But my select desperately stays as multiple rows.<br/>
  Can any one help me to know where and what I am doing wrong ?</p>