Bootstrap-select displays two selects menus

4
votes

Objective

To implement styling on the select tag using the Bootstrap-select library.

Problem

I am getting two selects rather than just one dropdown menu.

enter image description here

Question

What do i need to change in my javascript or elsewhere to get it to display correctly

Code

Demo on CodePen

HTML

<select class="selectpicker">
    <option data-hidden="true">Choose one...</option>
    <option>BBQ Pork</option>
    <option>Bacon</option>
    <option>Sausage</option>
</select>

Script library order

Javascript (I placed it in a script tag after the libraries)

$(document).ready(function(){
    $('.selectpicker').selectpicker(); 
});
1
javascriptjquerycsstwitter-bootstrap
You havent added the CSS file for Bootstrap-Select - vanburen
@vanburen yes, i missed that. I am tempted to delete the question but since it might help someone later, I would like to leave it up. If you would like to add that as an answer I will accept it. Otherwise I will answer my own question with the input you gave. Thanks. - JGallardo
Thanks and glad I could help. - vanburen

1 Answers

6
votes

You just need to add the Bootstrap-select CSS file.