I'm doing the same thing for an app, and I've found the CSS classes for form elements match up pretty well actually.
Twitter's Bootstrap form elements look like this:
<div class="clearfix">
<label for="xlInput">X-Large input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div>
And CakePHP's FormHelper generates elements like this:
<div class="input text">
<label for="UserName">Name</label>
<input name="data[User][name]" type="text" value="" id="UserName" />
</div>
The main difference being the label outside the div in Bootstrap. FormHelper lets you set custom classes like array('class' => 'clearfix')
.
The .input
class in Bootstrap is defined in forms.less and only sets margin-left: 150px;
to move the inputs over to the right. If you don't use this style you can just add margin-right: 20px;
to <label>
instead.
The code in my form element ends up being:
echo $this->Form->input('first_name', array('div' => 'clearfix'));
...and generates elements that are styled properly by Bootstrap.
<div class="clearfix required">
<label for="PersonFirstName">First Name</label>
<input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/>
</div>
I'm still learning both frameworks so there may be problems with this. Hope it helps though.