Bootstrap Multiselect Dropdown with Checkboxes

A lightweight jQuery plugin for Bootstrap to create multiselect dropdown with checkboxes. It add the functionality to HTML select element for multiple selection with check-boxes.

Plugin Overview

Plugin: Bootstrap Multiselect
Author: David Stutz
Licence: Apache License 2.0 and BSD 3-Clause License
Published: April 6, 2019
Repository: Fork on GitHub
Dependencies: jQuery 3.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 335 KB

How to Use Bootstrap Multiselect Dropdown :

1. First of all load the jQuery and Bootstrap framework into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. After this, include the Bootstrap multiselect‘s CSS and JavaScript file to your page.

<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="css/bootstrap-multiselect.css">

<!-- Bootstrap Multiselect JS -->
<script data-main="dist/js/" src="js/require.min.js"></script>

3. Now create HTML select element with your list of options with a unique id. Just like below.

<select id="mySelect" multiple="multiple">
<option value="Option one">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>
<option value="Option four">Option four</option>
<option value="Option five">Option five</option>
<option value="Option six">Option six</option>
</select>

4. And Finally call the plugin to active the multiselect.

<script>
require(['bootstrap-multiselect'], function(purchase){
$('#mySelect').multiselect();
});
</script>

Advance Configuration Options for Multiselect Dropdown with Checkboxes

Visit the demo page for advance configuration options to create Bootstrap multiselect dropdown with checkboxes.