Bootstrap 3 Form with Multi-Select Buttons

by bizamajig

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 class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel panel-primary">
                <div class="panel-heading">
                     <h3 class="panel-title">Panel title</h3>

                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="skill" class="col-sm-3 control-label">Skill</label>
                            <div class="col-sm-9">
                                <select id="skill" class="form-control multiselect " multiple="multiple">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                              ...

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');
 select.multiselect, select.multiselect + div.btn-group, select.multiselect + div.btn-group button.multiselect, select.multiselect + div.btn-group.open .multiselect-container {
    width:100% !important;
}

JavaScript

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