Bootstrap 3

New: Updated UI
New: Mobile browser support
Fixed: /favicon.ico will return the favicon now

src/UI/Form/CheckboxTemplate.html

@@ -1,21 +1,23 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
-        <label class="checkbox toggle well">
-            <input type="checkbox" name="fields.{{order}}.value"/>
-            <p>
-                <span>Yes</span>
-                <span>No</span>
-            </p>
+    <div class="col-sm-5">
+        <div class="input-group">
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="fields.{{order}}.value"/>
+                <p>
+                    <span>Yes</span>
+                    <span>No</span>
+                </p>
 
-            <div class="btn btn-primary slide-button"/>
-        </label>
+                <div class="btn btn-primary slide-button"/>
+            </label>
 
-        {{#if helpText}}
-            <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
+            {{#if helpText}}
+                <span class="help-inline-checkbox">
+                    <i class="icon-nd-form-info" title="{{helpText}}"/>
+                </span>
+            {{/if}}
+        </div>
     </div>
 </div>

src/UI/Form/FormHelpPartial.html

@@ -1,11 +1,8 @@
-{{#if helpText}}
-    <span class="help-inline">
+<span class="col-sm-1 help-inline">
+    {{#if helpText}}
         <i class="icon-nd-form-info" title="{{helpText}}"/>
-    </span>
-{{/if}}
-
-{{#if helpLink}}
-    <span class="help-inline">
+    {{/if}}
+    {{#if helpLink}}
         <a href="{{helpLink}}" class="help-link"><i class="icon-info-sign"/></a>
-    </span>
-{{/if}}
+    {{/if}}
+</span>

src/UI/Form/PasswordTemplate.html

@@ -1,12 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
-        <input type="password" name="fields.{{order}}.value" validation-name="{{name}}"/>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
+    <div class="col-sm-5">
+        <input type="password" name="fields.{{order}}.value" validation-name="{{name}}" class="form-control"/>
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/PathTemplate.html

@@ -1,12 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
-        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" class="x-path"/>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
+    <div class="col-sm-5">
+        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" class="form-control x-path"/>
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/SelectTemplate.html

@@ -1,16 +1,12 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
-        <select name="fields.{{order}}.value">
+    <div class="col-sm-5">
+        <select name="fields.{{order}}.value" class="form-control">
             {{#each selectOptions}}
                 <option value="{{value}}">{{name}}</option>
             {{/each}}
         </select>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/TextboxTemplate.html

@@ -1,8 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
-        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" spellcheck="false"/>
-        {{> FormHelpPartial}}
+    <div class="col-sm-5">
+        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" spellcheck="false" class="form-control"/>
     </div>
+    {{> FormHelpPartial}}
 </div>