Twitter Bootstrap 3 Template

ChameleonForms has a built-in Twitter Bootstrap 3 template that you can switch to as part of global configuration or on a per-form basis. This will allow you to rapidly develop forms for your Twitter Bootstrap 3 powered site (useful 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.

Support for Bootstrap 4 and other commonly used templates like Material will be added in the future. If you'd like to add support feel free to issue a pull request.

Getting started

The easiest way to get up and running with Twitter Bootstrap is to specify it as part of the global config:

  1. In Startup.cs simply change your AddChameleonForms call to reference the TwitterBootstrap3FormTemplate:

    public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddChameleonForms<TwitterBootstrap3FormTemplate>(...);
}

  2. If you already have Twitter Bootstrap referenced in your layout then add the extra CSS and JavaScript files to get validation highlighting looking great

  3. Create a ChameleonForm using the BeginChameleonForm extension method and you are good to go

ChameleonForms custom CSS and JavaScript to complement Bootstrap

There are two files that ChameleonForms provides in the wwwroot/lib/chameleonforms folder 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):

  • chameleonforms-twitterbootstrap.css
    • 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
  • unobtrusive-twitterbootstrap3-validation.chameleonforms.js
    • Adds the has-error class to the field container when there is an unobtrusive validation error
    • Removes the has-error class 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
    • Only supports jQuery validate unobtrusive validation, doesn't yet support aspnet-validation

HTML Generation

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 MessageType maps 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-addon class 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. If you create such templates then please send them to us in a pull request so we can include them in the main library.

Modifications

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 TwitterBootstrap3FormTemplate class), while still using the work we have done (and subscribing to updates when you update the ChameleonForms NuGet package).