Bootstrap Form Helpers

Extend Bootstrap's components—now with 12 custom jQuery plugins.

Download Bootstrap Form Helpers

About countries

For adding a drop-down of countries or display country name from country code, include bootstrap-formhelpers-countries.{language}.js and bootstrap-formhelpers-countries.js once alongside the other JS files.

If you want to have access to the country flags, you can include bootstrap-formhelpers-countries.flags.css once alongside the other CSS files.

Use cases

Example for loading the list of countries and selecting a default country

<select class="input-medium bfh-countries" data-country="US"></select>

Example for loading the list of countries, limited to a specific list of countries

<select class="input-medium bfh-countries" data-countryList="US,AG,AU"></select>

Example for loading the list of countries in JavaScript and selecting a default country

<button onclick="$('#countries1').bfhcountries({country: 'US'})" class="btn">Load Countries</button>
<select id="countries1" class="input-medium"></select>

Example for loading the list of countries and flags using Bootstrap Form Helpers' Select Box

<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
  <input type="hidden" value="">
  <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">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

Example for displaying the country name and flag from a country code

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