In this quick tutorial, we're going to take a look at how to create a Bootstrap multi-select dropdown using Bootstrap Select and Bootstrap.
The multi-select dropdown is a great way to allow the user to select multiple options from a list. Allowing the user to select more than one option at the same time makes it possible to save time and reduce the amount of data needed.
This solution can nicely replace the native select element with multiple choices or a list of checkboxes.
The code is based on Bootstrap 4, so it supports all modern browsers and mobile devices. I am planning to update it to Bootstrap 5 soon.
Step-by-step instructions
- Include Bootstrap 4 and jQuery in your project
- Include Bootstrap Select Plugin
- Add an ordinary select to your HTML, don't forget to add the
multipleattribute. - Optional: I also use a few Bootstrap utility classes in
data-style-<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100"> options go here</select> - Initialize Bootstrap Select in JavaScript -
$('.selectpicker').selectpicker();
I also created a video tutorial, please have a look. It's the same solution but I don't use any custom styling as in the JSFiddle example.
What is a multi-select dropdown?
Multi-select dropdowns are a powerful way to offer a lot of options in a small space. They're also great for letting users pick more than one option.
While the idea of a multi-select dropdown may seem simple, getting it right can be tricky. How do you handle scrolling? How do you show all the items at once? And how do you keep your code clean?
Luckily, the approach described in this snippet, works on all browsers and devices, including touchscreens (like mobile phones and tablets).
When to use a multi-select dropdown in Bootstrap?
You might wonder why you should use a multi-select dropdown instead of the regular dropdown, which is easy to use and does the job.
The answer is that the multi-select dropdown can be used when there are many options to choose from, but only a few of them are relevant at any given moment. The normal dropdowns provide only one option at once, so if you have more than one, you will have to make a selection before selecting another one.
Multi-select dropdowns are ideal when you have a large number of options that need to be displayed on the form and users need to select more than one option from the list.
They are also great for situations where you want to allow users to choose multiple items from a larger list of choices, such as choosing products from your store or allowing them to select multiple colors for an item. It’s also useful when you want to display additional information about each option in the list, such as price, size, or weight (for example).
If you liked this snippet, you might also enjoy exploring Bootstrap products list or Bootstrap footer with menus and signup form .
