In order to enable your fields to pick up Bootstrap styling, you must specify the class name form-control on each of them. In this post, I’ll show how to make this much easier by setting it for all text fields at one time via the theme.
In an application that is set up to work with Bootstrap 3, I created a div with the class well and added three labels and fields. This is what it looks like by default:
My application is already using a custom theme in order to make Bootstrap and other resources available globally, so I added this code to automatically add the form-control class to all input text controls.
<!-- Set all inputs to bootstrap styling -->
<control>
<name>InputField.EditBox</name>
<property mode="concat">
<name>styleClass</name>
<value>form-control</value>
</property>
</control>
This instructs the server to look for all text fields and add form-control to the styleClass attribute. The property mode is set to concat so it will add the class to any other classes you define on the control rather than overwrite it. Now, all text fields will automatically pick up the correct styling!
That’s more like it.
Note
This assumes you already have bootstrap enabled in your application. The specific layout in these screen shots was created with a well and other divs with standard Bootstrap scaffolding classes.
