Bootstrap Form Helpers

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

Download Bootstrap Form Helpers

About Languages

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

If you want to have access to the country names, you can include bootstrap-formhelpers-countries.{language}.js

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 languages and selecting a default language

<select class="input-medium bfh-languages" data-language="en"></select>

Example for loading the list of languages with country names

<select class="input-medium bfh-languages" data-language="en_US" data-available="en_US,fr_CA,es_MX"></select>

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

<div class="bfh-selectbox bfh-languages" data-language="en_US" data-available="en_US,fr_CA,es_MX" 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">
  <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>

Example for displaying the language name and flag from language code

<span class="bfh-languages" data-language="en_US" data-flags="true"></span>