select2-bootstrap-css/_jekyll/index.html

Simple CSS to make Select2 widgets fit in with Bootstrap

---
layout: minimal
version: 3.5.2
---
<div class="jumbotron">
	<div class="container">
		<div class="select2-wrapper">
			<select class="form-control input-lg select2">
				<option></option>
				{% include select2-select.html %}
			</select>
		</div>
		<div class="select2-wrapper">
			<select class="form-control select2" multiple="multiple">
				<option></option>
				{% include select2-select.html %}
			</select>
		</div>
		<div class="select2-wrapper">
			<div class="form-group">
				<div class="input-group input-group-sm select2-bootstrap-prepend">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<select id="select2-single-input-group-sm" class="form-control select2" disabled>
						<option></option>
						{% include select2-select.html %}
					</select>
				</div>
			</div>
		</div>

		<h1 class="jumbotron-title">Select2 Bootstrap&nbsp;3&nbsp;CSS</h1>

		<p class="lead">CSS to make <a href="http://select2.github.io/select2/">Select2</a> fit in with <a href="http://getbootstrap.com/">Bootstrap 3</a>  – ready for use in original, LESS, Sass and Compass flavors.</p>

		<a href="https://raw.githubusercontent.com/t0m/select2-bootstrap-css/bootstrap3/select2-bootstrap.css" class="btn btn-outline btn-lg">Download CSS from GitHub</a>

		<h2>Demonstrations</h2>

		<div class="select2-wrapper">
			<div class="input-group input-group-sm select2-bootstrap-prepend" id="abId0.002539606299251318">
				<div class="input-group-btn">
					<button class="btn btn-default" type="button" data-select2-open="demonstrations">
						Bootstrap 3.3.2 and
					</button>
				</div>
				<select id="demonstrations" class="form-control">
					<option></option>
					{% for version in site.versions reversed %}
						<option value="{{ version }}.html">{{ version }}</option>
					{% endfor %}
				</select>
			</div>
		</div>
	</div>
</div>

{% include footer.html %}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
<script>
	$( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6 } );

	$( ":checkbox" ).on( "click", function() {
		$( this ).parent().nextAll( "select" ).select2( "enable", this.checked );
	});

	$( "#demonstrations" ).select2( { placeholder: "Select2 version", minimumResultsForSearch: -1 } ).on( "change", function() {
		document.location = $( this ).find( ":selected" ).val();
	} );

	$( "button[data-select2-open]" ).click( function() {
		$( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
	});
</script>