CakePHP 2.0 with Twitter Bootstrap

Question

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!

score 24 · Accepted Answer · edited Mar 31 '12 at 00:37

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.

You're welcome. I saw your post last week when I was looking for the solution myself. — , Mar 01 '12 at 00:17
@Jamie thanks for answer! Much appreciated :-) I was wandering if its possible to integrate the in the control div when a validation error is triggered? It looks better than the alert IMO. — Mr B, Aug 15 '12 at 10:56

Costa · Answer 2 · 2013-06-14T03:44:32.080

16

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

https://github.com/slywalker/TwitterBootstrap

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.

edited Jun 14 '13 at 03:44

answered Oct 28 '12 at 03:13

Costa

4,851
33
30

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: https://github.com/slywalker/cakephp-plugin-boost_cake (personally I just modified the previous plugin to output the new BS3 class names) – Costa Nov 09 '13 at 02:13

score 4 · Answer 3 · answered Apr 17 '13 at 08:21

4

Here's a newer one:
http://drawrdesign.com/twitter-bootstrap-for-cakephp

Github page:
https://github.com/Rhym/cakeStrap

answered Apr 17 '13 at 08:21

Mike Taylor

51
2

score 3 · Answer 4 · answered Apr 27 '12 at 15:24

3

Checkout our Twitter Bootstrap Helper

https://github.com/loadsys/twitter-bootstrap-helper

answered Apr 27 '12 at 15:24

Lee Forkenbrock

39
1

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 03:46

score 2 · Answer 5 · edited Jul 11 '14 at 06:19

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

      -TO-

app/webroot/css/  

      -THEN MOVE-

js/bootstrap.js
js/bootstrap.min.js

      -TO-

app/webroot/js/

      -THEN MOVE-

img/glyphicons-halflings-white.png
img/glyphicons-halflings.png

      -TO-

app/webroot/img/

***IT'S VERY IMPORTANT THAT YOU DONT PUT THESE FILES IN THE ROOT OF YOUR SITE(I will explain later...)!!!

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

app/View/Layouts/default.ctp

It should look like:

    <?php
/**
 *
 * PHP 5
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * 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)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.View.Layouts
 * @since         CakePHP(tm) v 0.10.0.1076
 * @license       MIT License (http://www.opensource.org/licenses/mit-license.php)
 */

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework');
?>
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->charset(); ?>
<title>
    <?php echo $cakeDescription ?>:
    <?php echo $title_for_layout; ?>
</title>
<?php
    echo $this->Html->meta('icon');

    echo $this->Html->css('cake.generic');


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

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

        <?php echo $this->Session->flash(); ?>

        <?php echo $this->fetch('content'); ?>
    </div>
    <div id="footer">
        <?php echo $this->Html->link(
                $this->Html->image('cake.power.gif', array('alt' =>     $cakeDescription, 'border' => '0')),
                'http://www.cakephp.org/',
                array('target' => '_blank', 'escape' => false)
            );
        ?>
    </div>
</div>
<?php echo $this->element('sql_dump'); ?>
</body>
</html>

Find this:

echo $this->Html->css('cake.generic');

Below it add this:

echo $this->Html->css('cake.generic');

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!

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 09:24

score 1 · Answer 6 · answered Feb 12 '12 at 19:28

1

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">
<script src="less.js" type="text/javascript"></script>

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.

answered Feb 12 '12 at 19:28

L. Adamek

287
1
3
5

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

score 0 · Answer 7 · answered May 25 '13 at 18:14

0

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

answered May 25 '13 at 18:14

Marc-Jan

1

score 0 · Answer 8 · answered Oct 16 '13 at 08:10

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

score 0 · Answer 9 · edited Oct 18 '13 at 14:05

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.

score 0 · Answer 10 · answered Feb 12 '12 at 21:44

0

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

answered Feb 12 '12 at 21:44

Chuck Burgess

11,600
5
41
74

score 0 · Answer 11 · answered Feb 22 '12 at 15:38

0

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.

answered Feb 22 '12 at 15:38

fullybaked

4,117
1
24
37

CakePHP 2.0 with Twitter Bootstrap

11 Answers11