Twitter Bootstrap 3 Template
ChameleonForms has a built-in Twitter Bootstrap 3 template that you can switch to with one line of code. This will allow you to rapidly develop forms for your Twitter Bootstrap 3 powered site (which we often use for quick prototyping), but give you the flexibility to easily change the template in the future if your quick prototype makes it big and warrants a custom redesign.
The easiest way to get up and running with Twitter Bootstrap is to:
- This includes the
bootstrappackage and the
ChameleonFormspackage as dependencies
- This includes the
~/bundles/chameleon-bootstrapcssCSS bundle from your layout or your form pages
- Create a ChameleonForm using the
BeginChameleonFormextension method and you are good to go
For more manual steps, to understand the HTML being generated, for instructions for how to modify the template to fit your needs, or to understand what is contained in the
App_Start\TwitterBootstrap.cs file please see the relevant documentation below.
Make Twitter Bootstrap template the global default
To easily change the form template for all forms that use the
BeginChameleonForm extension method simply use this snippet in
using ChameleonForms; using ChameleonForms.Templates.TwitterBootstrap3; ... FormTemplate.Default = new TwitterBootstrapFormTemplate();
Alternatively, you can use one of the other methods of changing form template.
There are two files that ChameleonForms provides in it's
ChameleonForms.TwitterBootstrap3 package that you can optionally include in your Chameleon-powered Twitter Bootstrap form pages (or your layout if you want to include them across the site):
- Makes form hints a light grey even when the field is invalid (otherwise it would turn red making it look like an error)
- Makes the required designator that ChameleonForms puts in looks better
- Makes field labels for fields that don't have a
<label>look the same as ones that do (bold) otherwise it looks weird
- Adds the
has-errorclass to the field container when there is an unobtrusive validation error
- Removes the
has-errorclass from the field container when an invalid field (either from client-side or server-side validation) becomes valid when the user interacts with the field
- Adds the
You can either make use of the bundles we define that group these with the Bootstrap files in our
ChameleonForms.TwitterBootstrap3 NuGet package (described above) or add these files to your existing bundles. Note: If you are using the default
You can find documentation about the HTML that is generated by the Twitter Bootstrap template across the ChameleonForms documentation:
- Form HTML
- Message HTML - including the documentation about how the ChameleonForms
MessageTypemaps to the Twitter Bootstrap Emphasis Styles
- Section HTML - including top-level and nested sections
- Navigation HTML - including how to add icons to submit buttons, control their size and control their emphasis style (and a great example of the options)
- Field HTML - including:
- The HTML template it uses for inputs, textareas, select boxes, single checkboxes, radio/checkbox lists, file upload controls and other controls
- The default required designator HTML (which can be overriden)
- How to create input groups with the
input-group-addonclass automatically added to appended and prepended content
- The HTML for nested fields
Horizontal and inline forms
The template doesn't currently support horizontal or inline forms. We will likely create separate templates to achieve that (probably by extending the base on and applying the necessary changes to support these types of forms.
If you create such templates then please send them to us in a pull request so we can include them in the main library.
If you are curious to see where this support is in our backlog then please consult our Trello board.
It's worth noting that the Twitter Bootstrap 3 is a relatively new addition to ChameleonForms at 1.0 (in fact it was the last feature we actively developed in order to meet what we wanted for 1.0). As such we haven't had a chance to use the template in anger so if there is anything that you want to function differently it's entirely possible that it will be useful to other people. Consequently, we encourage you to raise an issue if you notice something.
If you think that the changes you want to make to the template are specific to your needs then you can easily extend the template to change the bits you want (just extend the
TwitterBootstrapFormTemplate class), while still using the initial work we have done (and subscribing to updates when you update the ChameleonForms NuGet package).