---
layout: minimal
version: 4.0.5
---
<div class="jumbotron">
	<div class="container">
		<div class="select2-wrapper">
			<select class="form-control form-control-lg select2-single" dir="rtl">
				<option></option>
				{% include select2-select.html %}
			</select>
		</div>
		<div class="select2-wrapper">
			<select class="form-control select2-multiple" 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">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox">
						</div>
					</div>
					<select id="select2-single-input-group-sm" class="form-control select2-single" disabled>
						<option></option>
						{% include select2-select.html %}
					</select>
				</div>
			</div>
		</div>

		<h1 class="jumbotron-title">Select2 Bootstrap Theme</h1>

		<p class="lead">A <a href="https://select2.github.io/examples.html#themes">Select2 v4 theme</a> built with <a href="http://getbootstrap.com/">Bootstrap 4</a> variables and mixins.</p>

		<a href="4.0.5.html" class="btn btn-outline btn-lg">Demonstrations</a>
	</div>
</div>

{% include footer.html %}

{% include scripts.html %}
<script>
	$( ".select2-single, .select2-multiple" ).select2( {
		theme: "bootstrap",
		placeholder: "Select a State",
		maximumSelectionSize: 6,
		containerCssClass: ':all:'
	} );

	$( ":checkbox" ).on( "click", function() {
		$( this ).parent().nextAll( "select" ).prop( "disabled", !this.checked );
	});
</script>