Change the style of Dropdown multi select list in Bootstrap

Question

I have two select lists. One is normal select list (Title) and the other is multi selection list (Choose Activities). The problem is that the multi selection list style is different than the normal one. I tried different bootstrap classes and even used the Inspect tool to change the multi selection style.

The normal select list (This is the style I want to achieve for the other select list as shown in the screen shot below using bootstrap).

<div class="form-group col-md-6 col-lg-6 col-sm-6">
    <label>Title</label>
    <select id="txtTitle" class="form-control">
        <option value="default">Please Select</option>
        <option value="one">One</option>
        <option value="two">Two</option>
    </select>
</div>

The multi select list:

<div class="form-group col-md-6 col-lg-6 col-sm-6">
    <label>Choose Activities</label>
    <select id="DDLActivites" data-style="" class="selectpicker form-control" multiple data-max-options="2">
        <option>Mustard</option>
        <option>Barbecue</option>
     </select>
</div>

I want to make the multi select dropdown list same as the title dropdown list using bootstrap.

Answer 1

You can simply add data-style="btn-default" even though it is not included in the documentation of bootstrap-select. In bootstrap it is there as a css setting.

For more information visit this link http://silviomoreto.github.io/bootstrap-select/examples/#button-classes

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>



<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <label>Title</label>
  <select id="txtTitle" class="form-control selectpicker">
        <option value="default">Please Select</option>
        <option value="one">One</option>
        <option value="two">Two</option>
    </select>
</div>

<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <label>Choose Activities</label>
  <select id="DDLActivites" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="2">
        <option>Mustard</option>
        <option>Barbecue</option>
     </select>
</div>