Another dirty one …:

 * add class "control-label" where missing
 * add JS to on "select2-open" check if the parent elements has a class "has-*" (danger, warning, success) and copy this class to #select2-drop to inherit Bootstrap 3's validation state appearance for Select2
 * lots of (sloppy) fixes regarding line-height and such, some still slightly off, but getting there

Author: Florian Kissling

_jekyll/_layouts/default.html

@@ -25,7 +25,7 @@
     </div>
 
     <div class="page-header">
-      <h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups"#></a> http://getbootstrap.com/components/#input-groups</small></h3>
+      <h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups" data-toggle="tooltip" data-placement="right" title="http://getbootstrap.com/components/#input-groups">#</a></small></h3>
     </div>
 
     <div class="form-group">
@@ -121,29 +121,29 @@ <h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-group
     <div class="container">
 
       <div class="page-header">
-        <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-sizes">#</a> http://getbootstrap.com/css/#forms-control-sizes</small></h3>
+        <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-sizes" data-toggle="tooltip" data-placement="right" title="http://getbootstrap.com/css/#forms-control-sizes">#</a></small></h3>
       </div>
 
       <div class="row">
         <div class="col-md-4">
-          <label for="select2-multiple-input-sm">col-md-4</label>
+          <label for="select2-multiple-input-sm" class="control-label">col-md-4</label>
           <select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple" multiple>
             {% include select2-select.html %}
           </select>
         </div>
         <div class="col-md-3">
-          <label for="select2-multiple-input-sm">col-md-3</label>
-          <select id="select2-multiple-input-sm" class="form-control input-sm select2">
+          <label for="select2-multiple-input-sm" class="control-label">col-md-3</label>
+          <select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple">
             {% include select2-select.html %}
           </select>
         </div>
         <div class="col-md-2">
-          <label for="bootstrap-input-sm">Bootstrap input</label>
+          <label for="bootstrap-input-sm" class="control-label">Bootstrap input</label>
           <input id="bootstrap-input-sm" class="form-control input-sm" placeholder=".input-sm">
         </div>
         <div class="col-md-3">
-          <div class="form-group">
-            <label for="select2-single-input-group-sm">col-md-3</label>
+          <div class="form-group has-success">
+            <label for="select2-single-input-group-sm" class="control-label">col-md-3</label>
             <div class="input-group input-group-sm select2-bootstrap-prepend">
               <span class="input-group-addon">
                 <input type="radio">
@@ -158,14 +158,14 @@ <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-si
       </div>
 
       <div class="row">
-        <div class="col-md-4">
-          <label for="select2-multiple">col-md-4</label>
+        <div class="col-md-4 has-warning">
+          <label for="select2-multiple" class="control-label">col-md-4</label>
           <select id="select2-multiple" class="form-control select2-multiple" multiple>
             {% include select2-select.html %}
           </select>
         </div>
         <div class="col-md-3">
-          <label for="span_small">col-md-3</label>
+          <label for="span_small" class="control-label">col-md-3</label>
           <select id="span_small" class="form-control select2">
             {% include select2-select.html %}
           </select>
@@ -176,12 +176,12 @@ <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-si
         </div>
         <div class="col-md-3">
           <div class="form-group">
-            <label for="span_large">col-md-3</label>
+            <label for="span_large" class="control-label">col-md-3</label>
             <div class="input-group select2-bootstrap-prepend">
               <span class="input-group-addon">
                 <input type="checkbox">
               </span>
-              <select id="span_large" class="form-control select2" multiple>
+              <select id="span_large" class="form-control select2-multiple" multiple>
                 <option></option>
                 {% include select2-select.html %}
               </select>
@@ -192,30 +192,29 @@ <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-si
 
       <div class="row">
         <div class="col-md-4">
-          <label for="select2-multiple-input-lg">col-md-4</label>
+          <label for="select2-multiple-input-lg" class="control-label">col-md-4</label>
           <select id="select2-multiple-input-lg" class="form-control input-lg select2-multiple" multiple>
             {% include select2-select.html %}
           </select>
         </div>
         <div class="col-md-3">
-          <label for="span-small">col-md-5</label>
+          <label for="span-small" class="control-label">col-md-5</label>
           <select id="span-small" class="form-control input-lg select2-multiple">
             {% include select2-select.html %}
           </select>
         </div>
         <div class="col-md-2">
-          <label for="bootstrap-input-lg">Bootstrap input</label>
+          <label for="bootstrap-input-lg" class="control-label">Bootstrap input</label>
           <input id="bootstrap-input-lg" class="form-control input-lg" placeholder=".input-lg">
         </div>
         <div class="col-md-3">
-          <div class="form-group">
-            <label for="select2-multiple-input-group-lg">col-md-3</label>
+          <div class="form-group has-error">
+            <label for="select2-multiple-input-group-lg" class="control-label">col-md-3</label>
             <div class="input-group input-group-lg select2-bootstrap-prepend">
               <span class="input-group-addon">
                 <input type="checkbox">
               </span>
               <select id="select2-multiple-input-group-lg" class="form-control select2">
-                <option></option>
                 {% include select2-select.html %}
               </select>
             </div>
@@ -224,7 +223,7 @@ <h3>Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-si
       </div>
 
       <div class="page-header">
-        <h3>Button Addons <small><a href="http://getbootstrap.com/components/#input-groups-buttons">#</a> http://getbootstrap.com/components/#input-groups-buttons</small></h3>
+        <h3>Button Addons <small><a href="http://getbootstrap.com/components/#input-groups-buttons" data-toggle="tooltip" data-placement="right" title="http://getbootstrap.com/components/#input-groups-buttons">#</a></small></h3>
       </div>
 
       <div class="row">
@@ -245,8 +244,8 @@ <h3>Button Addons <small><a href="http://getbootstrap.com/components/#input-grou
           </div>
         </div>
         <div class="col-md-5">
-          <label for="span_medium">col-md-5</label>
-          <select id="span_medium" class="form-control select2" multiple>
+          <label for="span_medium" class="control-label">col-md-5</label>
+          <select id="span_medium" class="form-control select2-multiple" multiple>
             {% include select2-select.html %}
           </select>
           <span class="help-block"><code>span.help-block</code> A block of help text that breaks onto a new line and may extend beyond one line.</span>
@@ -256,19 +255,38 @@ <h3>Button Addons <small><a href="http://getbootstrap.com/components/#input-grou
 
     {% include footer.html %}
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="http://ivaynberg.github.io/select2/select2-{{ page.version }}/select2.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
     <script>
+
       $('.select2').select2({ placeholder: '' });
       $('.select2-multiple').select2({ placeholder: "Select a State", closeOnSelect: false });
       $('.select2-allow-clear').select2({ allowClear: true, placeholder: "Select a State" });
-      $('.select2-remote').select2({ placeholder: 'Remote Data', data: [{id:'A', text:'A'}, {id:'B', text:'B'}, {id:'C', text:'C'} ] });
+      $('.select2-remote').select2({ placeholder: 'Remote Data', data:
+        [
+          { id:'A', text:'A' },
+          { id:'B', text:'B' },
+          { id:'C', text:'C' }
+        ]
+      });
+
+      $(".select2, .select2-multiple, .select2-allow-clear, .select2-remote").on("select2-open", function() {
+        if ( $(this).parents('[class*="has-"]').length ) {
+          var classNames = $(this).parents('[class*="has-"]')[0].className.split(/\s+/);
+          for (var i=0; i<classNames.length; ++i) {
+              if ( classNames[i].match("has-") ) {
+                $('#select2-drop').addClass( classNames[i] );
+              }
+          }
+        }
+
+      });
 
       $('button[data-select2-open]').click(function(){
         $('#' + $(this).data('select2-open')).select2('open');
       });
-    </script>
 
+    </script>
   </body>
 </html>

_jekyll/index.html

@@ -53,7 +53,7 @@ <h2>Demonstrations</h2>
 
 {% include footer.html %}
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="http://ivaynberg.github.io/select2/select2-3.4.2/select2.js"></script>
 <script>
 	$('.select2').select2({ placeholder: "Select a State", maximumSelectionSize: 6 });

_jekyll/select2-bootstrap.css

@@ -29,6 +29,7 @@
   background: none;
   background-color: white;
   filter: none;
+  padding: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
@@ -40,7 +41,7 @@
 .select2-container-multi .select2-choices,
 .select2-container .select2-arrow {
   min-height: 34px;
-  line-height: 35px;
+  line-height: 1.42857;
 }
 
 /**
@@ -52,7 +53,7 @@
 .input-group-sm .select2-container .select2-choice,
 .input-group-sm .select2-container-multi .select2-choices {
   min-height: 30px;
-  line-height: 31px;
+  line-height: 1.5;
   border-radius: 3px;
 }
 
@@ -61,7 +62,7 @@
 .input-group-lg .select2-container .select2-choice,
 .input-group-lg .select2-container-multi .select2-choices {
   min-height: 45px;
-  line-height: 46px;
+  line-height: 1.33;
   border-radius: 6px;
 }
 
@@ -131,19 +132,70 @@
 }
 
 /**
- * Error styles from the original select2-bootstrap-css targeted at Bootstrap 2.
- * @todo: Implement test/demo and fix styles.
+ * Address Bootstrap's validation states and change Select2's border colors and focus states.
  */
-.form-group.error [class^="select2-choice"] {
+.has-warning .select2-choice,
+.has-warning .select2-choices {
+  border-color: #c09853;
+}
+.has-warning .select2-container-active .select2-choice,
+.has-warning .select2-container-multi.select2-container-active .select2-choices {
+  border-color: #a47e3c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+}
+.has-warning.select2-drop-active {
+  border-color: #a47e3c !important;
+}
+
+.has-error .select2-choice,
+.has-error .select2-choices {
   border-color: #b94a48;
 }
+.has-error .select2-container-active .select2-choice,
+.has-error .select2-container-multi.select2-container-active .select2-choices {
+  border-color: #953b39;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+}
+.has-error.select2-drop-active {
+  border-color: #953b39 !important;
+}
+
+.has-success .select2-choice,
+.has-success .select2-choices {
+  border-color: #468847;
+}
+.has-success .select2-container-active .select2-choice,
+.has-success .select2-container-multi.select2-container-active .select2-choices {
+  border-color: #356635;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+}
+.has-success.select2-drop-active {
+  border-color: #356635 !important;
+}
 
 /**
- * .select2-search-field for multi-select Select2 widgets.
+ * Adjust height and line-height for .select2-search-field amd multi-select Select2 widgets.
  */
-.select2-container-multi .select2-choices .select2-search-field {
-  height: 32px;
-  line-height: 20px;
+.select2-chosen,
+.select2-container .select2-choices .select2-search-field input {
+  padding: 6px 12px;
+}
+
+.input-sm .select2-chosen,
+.input-group-sm .select2-chosen,
+.input-sm .select2-choices .select2-search-field input,
+.input-group-sm .select2-choices .select2-search-field input {
+  padding: 5px 10px;
+}
+
+.input-lg .select2-chosen,
+.input-group-lg .select2-chosen,
+.input-lg .select2-choices .select2-search-field input,
+.input-group-lg .select2-choices .select2-search-field input {
+  padding: 10px 16px;
 }
 
 /**
@@ -164,10 +216,6 @@
   border-color: #66afe9;
 }
 
-[class^="input-"] .select2-container {
-  font-size: 14px;
-}
-
 /**
  * Select2 widgets in Bootstrap Input Groups
  *