JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="form-group">
<div class="col-md-4">
<select id="test" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
<option value="mozarella1">Mozzarella</option>
<option value="mushrooms1">Mushrooms</option>
<option value="2pepperoni">Pepperoni</option>
<option value="3onions">Onions</option>
</select>
</div>
</div>
CSS
.btn-block {width : auto !important;}
JavaScript
$('#test').multiselect({
includeSelectAllOption: true,
maxHeight: 150,
buttonWidth: 'auto',
numberDisplayed: 2,
nSelectedText: 'selected',
nonSelectedText: 'None selected',
buttonText: function(options, select) {
var numberOfOptions = $(this).children('option').length;
if (options.length === 0) {
return this.nonSelectedText + '';
} else {
var selected = '';
options.each(function() {
var label = ($(this).attr('label') !== undefined) ?
$(this).attr('label') : $(this).html();
selected += label + ', ';
});
return selected.substr(0, selected.length - 2) + '';
}
}
});