Take the 2-minute tour ×

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.


share|improve this question
add comment

12 Answers

up vote 23 down vote accepted

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

'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'))
) ));

                '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>

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

share|improve this answer
Thanks! This is exactly what I was looking for! –  skimberk1 Feb 29 '12 at 23:55
You're welcome. I saw your post last week when I was looking for the solution myself. –  Jamie Mar 1 '12 at 0:17
@Jamie thanks for answer! Much appreciated :-) I was wandering if its possible to integrate the <span class="help-inline"> in the control div when a validation error is triggered? It looks better than the alert IMO. –  Sid Aug 15 '12 at 10:56
add comment

Bootstrap doesn't use any server-side code.

Except for LESS CSS, which you can either compile down to regular CSS on the server, or as the LESS CSS site shows you can have the browser compile it using less.js like this:

<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less">

Just link all the .less files using stylesheet/less and the less.js file and it should work.

Other than that Bootstrap is just HTML and Javascript. just put all the javascript in the webroot/js folder and make a layout for the main HTML and get going.

share|improve this answer
I wanted to know how to make the forms and buttons work with Bootstrap, but this is the best current answer. –  skimberk1 Feb 17 '12 at 23:00
Doesn't help, the question was how to make CakePHP print bootstrap compatible html markup. –  Vince Feb 20 '13 at 21:27
add comment

I have done this. What you will need to do is the following:

  • create the layout App/Views/Layouts/default.ctp
  • copy the bootstrap html into that
  • update the layout with the cake specific code

It works like a charm

share|improve this answer
add comment

Have a look at the CakePHP plugin AssetCompress which handles LESS compiling for you if you have NodeJS and LESS installed on your server.

Then you just need to include the CSS files in your layout and style the forms using the Bootstrap classes.

share|improve this answer
add comment

I wrote up a short post on how to get Bootstrap working with CakePHP here: http://wp.me/p2bC00-2s

This should help you in getting everything setup. If you have any further questions, feel free to comment on the post and I'll see if I can help.

share|improve this answer
add comment

Checkout our Twitter Bootstrap Helper


share|improve this answer
For the curious, this plugin does work, but it forces you to use (and remember) new methods to create form output. The slywalker plugin uses standard Cake method names. –  Costa Mar 11 '13 at 3:46
add comment

IMHO, the best Twitter Bootstrap plugin (+ recommended by one of the Cake devs in the bug tracker) is:


What's handy about this one is that it uses Cake 2's aliasing for the helpers so you don't need to change any of your view code.

So the regular $this->Html-> and $this->Form-> in all your old code will output Bootstrap markup. Awesome.

share|improve this answer
Note that this plugin is not compatible with Bootstrap 3. The author started a new plugin with Bootstrap 3 support, but it's very bare bones and barely does anything at this point: github.com/slywalker/cakephp-plugin-boost_cake (personally I just modified the previous plugin to output the new BS3 class names) –  Costa Nov 9 '13 at 2:13
add comment

Here's a newer one:

Github page:

share|improve this answer
+1, easy to use and works well. –  boj May 7 '13 at 18:42
add comment

Maybe you like this plugin: https://github.com/BradCrumb/lesscompiler.

It's a CakePHP Component that automatically compiles less files to css files. I just tested it with Bootstrap and it works find

share|improve this answer
add comment

Lets make it simple and update this. The fastest and easiest way to do this is as follows and is current as of v:2.9

Download the 3 folders for the bootstrap here: http://twitter.github.io/bootstrap/getting-started.html

Then unpack them and move: css/bootstrap.css css/bootstrap.min.css css/bootstrap-responsive.css css/bootstrap-responsive.min.css



      -THEN MOVE-




      -THEN MOVE-





Then, in the code editor of your choice(I prefer Netbeans) open the file:


It should look like:

 * PHP 5
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @package       app.View.Layouts
 * @since         CakePHP(tm) v

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework');
<!DOCTYPE html>
    <?php echo $cakeDescription ?>:
    <?php echo $title_for_layout; ?>


    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->fetch('script');

<div id="container">
    <div id="header">
        <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1>
    <div id="content">


    <div id="footer">
                $this->Html->image('cake.power.gif', array('alt' =>     $cakeDescription, 'border' => '0')),
                array('target' => '_blank', 'escape' => false)

Find this:


Below it add this:


echo $this->Html->css('bootstrap');

echo $this->Html->css('bootstrap.min');

echo $this->Html->css('bootstrap-responsive');

echo $this->Html->css('bootstrap-responsive.min');

Find this:

echo $this->fetch('script');

Below it add this:

echo $this->Html->script('bootstrap');

echo $this->Html->script('bootstrap.min');

***Remember earlier when I said I was going to explain why the files MUST be in the webroot directory(For anyone new to MVC)? The above code is how Cake includes its scripts and css. The Method it uses for this looks in app/webroot/js for javascript files; and respectively in app/webroot/css for css files. This makes iNcluding js and css files a synch. If you want the js/css files included GLOBALLY include them default.ctp.

*If you only need a script for use with one view/page then use this same code on the view file you need it on.

It might sound a little complicated but it should only take 3 min to include the twitter bootstrap globally in this way.

Hope this helps!

share|improve this answer
Why are you including both the minified and the normal versions of the files? bootstrap.min.css contains exactly the same css as bootstrap.css and likewise for the other files Including both just introduces needless http overhead. Your answer also doesn't solve the issues involving things like the formHelper as bootstrap expects a certain html format which the Cake helpers don't produce out-the-box. –  harryg Sep 17 '13 at 9:24
add comment

I agree with @Costa, Slywalker's plugin is the best solution. Here's the new version of his plugin, working with both Twitter Bootstrap 2.x and 3.x branches.

This plugin is far better as it extends nicely Html Helper, Form Helper and alerts.

Fork BoostCake Plugin for CakePHP 2.x at Github

share|improve this answer
add comment

I had the same problem using slywalker / cakephp-plugin-boost_cake. I opened a ticket and he had it fixed in a few hours. He updated to 1,03 and told me to use it like this:

<?php echo $this->Form->input('email', array( 'label' => array( 'text' => __('Email:'), ), 'beforeInput' => '<div class="input-append">', 'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>' )); ?>

I hope it helps some one else, too.

share|improve this answer
add comment

Your Answer


