title: Bootstrap3 and Select2 styling issues
body: <p>I'm experiencing some styling issues when using Select2 in combination with Bootstrap 3. I found out all about the <a href="https://fk.github.io/select2-bootstrap-css/index.html" rel="nofollow">Select2 Bootstrap 3 CSS</a> but I can't get it to work properly. </p>
  
  <p><a href="http://i.imgur.com/XnZD8wr.png" rel="nofollow">This</a> is how it looks like.</p>
  
  <p>As you can see it's too wide, the search glyphicon doesn't seem to appear and the placeholder isn't showing either.</p>
  
  <p>This is how my code looks like:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;link rel="stylesheet" href="~/Content/select2.css"&gt;
      &lt;link rel="stylesheet" href="~/Content/select2-bootstrap.css"&gt;
      &lt;link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" /&gt;
  
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;br /&gt;
  &lt;form class="form-horizontal"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;General data&lt;/legend&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="inputRequester" class="col-lg-2 control-label"&gt;Requester&lt;/label&gt;
              &lt;div class="col-lg-10"&gt;
                  &lt;input type="text" class="form-control input-sm" id="inputRequester" placeholder="Requester" value="@System.Environment.UserName" readonly&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="datepickerino" class="col-lg-2 control-label"&gt;Delivery date&lt;/label&gt;
              &lt;div class="col-lg-10"&gt;
                  &lt;input type="text" class="form-control input-sm" id="datepickerino"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="inputProject" class="col-lg-2 control-label"&gt;State&lt;/label&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;select id="inputProject" class="form-control input-sm select2"&gt;
                      &lt;option value="AL"&gt;Alabama&lt;/option&gt;
                      ...
                  &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              ...
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="//select2.github.io/select2/select2-3.4.2/select2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6} );
  &lt;/script&gt;
  </code></pre>