Select2 displaying issues with Bootstrap

Question

I want to make beautiful looking select box with bootstrap, and I found great one here : http://wrapui.com/items/preview/wrapkit/1.0/form-elements.html. But I cannot understand how to make a select field saying “Select your time zone” in “Select-Select2” div .
I’ve tried to include all css and js files that was included in that bootstrap theme, copy-pasted the entire <form> but it’s not working properly.
The good news is that the select element appears as in that bootstrap theme. The bad news is no action on click, select box is not opening. Also there is error in browser’s console “Uncaught Error: Graph container element not found” in morris.min.js. Here : https://github.com/morrisjs/morris.js/issues/137 it said that

JavaScript's code gets executed before the DOM contains #annual element. Put the javascript after the div or use jQuery.ready().

But all the javascript code is included at the end of html file.

I’m struggling already few days with that. Please if anyone could help.
P.S. I’m using Ruby on Rails at back-end.

Answer 1

Here is the html code :

I have also included the css and select 2 file in jsfiddle external library.check that out too.

<label class="col-sm-3 control-label" for="select2">Please select something</label>
<div class="col-sm-5">
    <select style="width:100%" data-input="select2" placeholder="Select your time zone">
        <option value=""></option>
        <optgroup label="Alaskan/Hawaiian Time Zone">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
        </optgroup>
        <optgroup label="Pacific Time Zone">
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
            <option value="OR">Oregon</option>
            <option value="WA">Washington</option>
        </optgroup>
        <optgroup label="Mountain Time Zone">
            <option value="AZ">Arizona</option>
            <option value="CO">Colorado</option>
            <option value="ID">Idaho</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NM">New Mexico</option>
            <option value="ND">North Dakota</option>
            <option value="UT">Utah</option>
            <option value="WY">Wyoming</option>
        </optgroup>
        <optgroup label="Central Time Zone">
            <option value="AL">Alabama</option>
            <option value="AR">Arkansas</option>
            <option value="IL">Illinois</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="OK">Oklahoma</option>
            <option value="SD">South Dakota</option>
            <option value="TX">Texas</option>
            <option value="TN">Tennessee</option>
            <option value="WI">Wisconsin</option>
        </optgroup>
        <optgroup label="Eastern Time Zone">
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="IN">Indiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="OH">Ohio</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WV">West Virginia</option>
        </optgroup>
    </select>

Check out this fiddle