jQuery Form Helpers For Twitter Bootstrap

Bootstrap Form Helpers is a small collection of 10+ jQuery plugins for creating beautiful, robust and efficient forms with Twitter's Bootstrap framework.

What's included:

• Select box replacement
• Country Picker
• State Picker
• Currency Picker
• Phone Input
• Language Picker
• Timezone Picker
• Google Font Picker
• Date Picker
• Time Picker
• Font Picker
• Font Size Picker
• Color picker

Basic Usage:

1. Include Bootstrap and Bootstrap Form Helpers CSS files in the head section of your page

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-formhelpers.css" rel="stylesheet">

2. Include jQuery library and bootstrap-formhelpers-selectbox.js script at the bottom of your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap-formhelpers-selectbox.js"></script>

3. Create the html for creating a select list

<div class="bfh-selectbox">
<input type="hidden" name="selectbox1" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="3">Option 3</span> <b class="caret"></b> </a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
<li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
<li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
...
</ul>
</div>
</div>
</div>

Change log:

v2.2.0 (2013-11-20)

• Adding colorpicker plugin.

v2.1.0 (2013-11-16)

• updated to the latest version.

---

This awesome jQuery plugin is developed by vlamanna. For more Advanced Usages, please check the demo page or visit the official website.