<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <div class=" col-md-4 offset-md-4"> <select class="js-example-matcher-start form-control select2" multiple="multiple" > <option>Programmes</option> <option>Intake Management</option> <option>Communities </option> <option>Locations</option> <option>Marketplace</option> <option>Care Consult</option> <option>Sessions</option> <option>Providers</option> <option>Module 2</option> <option>Module 3</option> </select> </div> <script> $("select").select2({ tags: "true", placeholder: "Select an option", allowClear: true }); </script>