Bootstrap select shows doesn't replace orignal dropdown but add its own

Question

I am using this for select combo,After adding its css and Js files i got this result. Here what i have tried so far.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>


<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>

The output.

So can you please have a look at this why this is happening ?

Answer 1

this is because the sequence of loading css file not correct. Combo css file must load after loding all other css files then the issue will resovled. If still not resolve then css classes or properties are overriding somewhere.

Answer 2

Add the script to initialize bootstrap select

$('select').selectpicker();

Answer 3

The problem is rel="stylesheet" is missing in both of the link tags.

Add rel="stylesheet" to both link tags and it will work fine. Sample below.

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

<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>

Answer 4

Here's a FIDDLE to play with. Notice the sequence of links in which they are loaded.

1. Jquery 3.2.1
2. bootstrap.min.js
3. bootstrap-select.js
4. bootstrap.min.css
5. bootstrap-select.css

There might be a conflict with the Jquery version you're loading in your code.

<select class="selectpicker show-tick form-control">
  <option>pen</option>
  <option>pencil</option>
  <option selected>brush</option>
</select>