Introduction

Hey there! Are you ready to learn how to create a Bootstrap multi-select dropdown? Well, you’ve come to the right place! In this article, I’ll walk you through the entire process step by step. Trust me, it’s going to be a lot of fun!

Why use a Multiselect Dropdown?

Multiselect dropdowns are a great way to allow users to select multiple options from a list. They are commonly used in forms where users need to choose multiple items, such as selecting multiple categories or tags for an article.

Step 1: HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap multiselect</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://harshniketseta.github.io/popupMultiSelect/dist/stylesheets/multiselect.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://harshniketseta.github.io/popupMultiSelect/dist/javascripts/multiselect.min.js"></script>
</head>
<body>
<div class="col-6 py-3 px-3 p-3">
                    <label class="font-weight-bold text-danger">Social Site</label>
                    <select class="form-control" name="filter_by_socialsite[]" id="filter_by_socialsite" multiple style="font-size: 18px; border: 1px solid blue;">
                        <option value="facebook"><b>Facebook</b></option>
                        <option value="twitter"><b>Twitter</b></option>
                        <option value="youtube"><b>Youtube</b></option>
                        <option value="wordpress"><b>WordPress</b></option>
                        <option value="tumblr"><b>Tumblr</b></option>
                        <option value="instagram"><b>Instagram</b></option>
                        <option value="quora"><b>Quora</b></option>
                        <option value="pinterest"><b>Pinterest</b></option>
                        <option value="reddit"><b>Reddit</b></option>
                        <option value="koo"><b>Koo</b></option>
                        <option value="scoopit"><b>Scoopit</b></option>
                        <option value="slashdot"><b>Slashdot</b></option>
                        <option value="roposo"><b>Roposo</b></option>
                        <option value="chingari"><b>Chingari</b></option>
                        <option value="telegram"><b>Telegram</b></option>
                        <option value="linkedin"><b>Linkedin</b></option>
                        <option value="linkedin_grp"><b>Linkedin Group</b></option>
                        <option value="fb_grp"><b>Facebook Group</b></option>
                        <option value="mitron"><b>Mitron</b></option>
                    </select>
                </div>
<body>
</html>

Output:-

It will help you ..!!!