CakePHP 2.0 with Twitter Bootstrap

skimberk1 picture skimberk1 · Feb 3, 2012 · Viewed 22.4k times · Source

Is there a way to configure CakePHP for it to work well with Twitter Bootstrap? I realize this question has already been asked here, but the answer wasn't really complete.

There are also quite a few tutorials out there, but they are all either outdated or just not working, example: Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1.

Thanks!

Answer

user140291 picture user140291 · Feb 29, 2012

Assuming that the css file is included in your layout in your view for forms you can use the follwoing:

<?php echo $this->Form->create('User', array(
'inputDefaults' => array(
    'div' => 'control-group',
    'label' => array('class' => 'control-label'),
    'between' => '<div class="controls">',
    'after' => '</div>',
    'class' => 'span3',
    'error' => array('attributes' => array('wrap' => 'div', 'class' => 'alert alert-error'))
) ));

echo $this->Form->input('password',array(
                'after' => '<span class = \'help-inline\'>Minimum of 5 characters.</span></div>'));
            ?>

I found this method to work perfectly with cake2.0 and bootstrap 2.0

This will produce the following

<div class="control-group required error">
<label for="UserPassword">Password</label>
<div class="controls">
<input name="data[User][password]" class="span3 form-error" type="password" value="" id="UserPassword">
<span class="help-inline">Minimum of 5 characters.</span></div>
<div class="alert alert-error">You must provide a password.</div>
</div>

The html above is after the form has been submitted and an error has been returned.