How to insert bootstrap form helper country picker

Question

how i insert above bootstrap plugin to my form. I import all necessary files to my form document. and I insert only this code. I never wrote any js code. But it is not work.

<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
</div>

Here my country picker link. Have any idea for my problem?

http://bootstrapformhelpers.com/country/#example4

Answer 1

This may be too late for you but I found this on another question and it worked for me:

<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
        <input form='form1' type="hidden" value="" required>
        <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
                <span class="bfh-selectbox-option input-medium" data-option=""></span>
                <b class="caret"></b>
        </a>
        <div class="bfh-selectbox-options countries" >
               <div role="listbox">
                      <ul role="option">
                      </ul>
               </div>
        </div>
</div>

Answer 2

To make it work you should add links to CSS and JS files of Bootstrap Form Helpers library which should be previously downloaded on your server

<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet">
<script src="js/bootstrap-formhelpers.min.js"></script>

Read carefully this page http://bootstrapformhelpers.com/gettingstarted/#jquery-plugins

Answer 3

is your index.html has all of:

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- Bootstrap Form Helpers -->
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">

<!-- jQuery -->
<script src="js/jquery-1.10.2.min.js"></script>

<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>

<!-- Bootstrap Form Helpers -->
<script src="js/bootstrap-formhelpers.min.js"></script>