Bootstrap 3 multiselect

by Steve Coffman

HTML

<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-3.0.0.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<div id="alertContainer"></div>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
					  1st: Choose Learning Experience
				    
                <i class="indicator fa fa-chevron-down pull-right"></i>
                 </a>
                </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body padded-panel">
            
	           	<div class="row">
		            <div class="col-sm-5">
		            	<div class="panel panel-primary" id="chosenLearningExperiencesContainer">
		                	<div class="panel-heading">
								<h3 class="panel-title">Chosen Learning Experiences</h3>
		                	</div>
		                	<div class="panel-body">
		                		<ul class="list-group" id="chosenLearningExperiences"></ul>
		                	</div>
		               	</div>
		            </div>
		            <div class="col-sm-1">
		            	<div class="add-remove-buttons">
			            	<button id="btnAddLE" name="btnAddLE" type="button" class="btn btn-primary btn-small"><i class="fa fa-arrow-left"></i></button>
			            	<button id="btnRemoveLE" name="btnRemoveLE" type="button" class="btn btn-primary btn-small"><i class="fa fa-arrow-right"></i></button>
		            	</div>
		            </div>
		            <div class="col-sm-5">
						<div class="panel panel-primary" id="allLearningExperiencesContainer">
		                	<div...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css');
 @import url('http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap-multiselect.css');


 .btn-group, .btn-group .multiselect {
    width: 100% !important;
}

JavaScript

$('.input-daterange').datepicker();
$('.multiselect').multiselect({
    includeSelectAllOption: true
});