23

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!

11 Answers 11

24

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.

2
  • You're welcome. I saw your post last week when I was looking for the solution myself.
    – user140291
    Mar 1, 2012 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.
    – Mr B
    Aug 15, 2012 at 10:56
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.

1
  • 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, 2013 at 2:13
4

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

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

0
3

Checkout our Twitter Bootstrap Helper

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

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, 2013 at 3:46
2

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!

1
  • 3
    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, 2013 at 9:24
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.

2
  • I wanted to know how to make the forms and buttons work with Bootstrap, but this is the best current answer.
    – skimberk1
    Feb 17, 2012 at 23:00
  • Doesn't help, the question was how to make CakePHP print bootstrap compatible html markup.
    – Vince
    Feb 20, 2013 at 21:27
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

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.

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

0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.