Twitter Bootstrap 3.0 and CakePHP 2.4.x

Question

I'm having a tough time getting Twitter Bootstrap on my brand new cakePHP installation.

Things done so far

-Installed and loaded BoostCake Plugin in AppController -I've placed Bootstrap files/folders in the webroot directory -I've placed jQuery 1.9.1 in the webroot/js directory -I've modified default.ctp to load the boostrap and js files.

So far, I created a basic test app with an an add form that grabs today's date for testing, but nothing is showing up. When I view my error log, I get the following routing for the css/js files

/repository/trunk/boostrap/index.php/feedbacks/js/bootstrap.min.js which is NOT the correct directory, to my understanding.

What am I missing?

Here's the directory listing

/repository/trunk/boostrap/app

Contents of Webroot css/ boostrap.css css/boostrap.min.css css/bootstrap-theme.css css/bootstrap-theme.min.css

fonts/glyphicons-halflings-regular.eot
fonts/glyphicons-halflings-regular.svg
fonts/glyphicons-halflings-regular.ttf
fonts/glyphicons-halflings-regular.woff

js/bootstrap.js
js/bootstrap.min.js
js/jquery-1.9.1.js

Contents of Controller

AppController.php
FeedbacksController.php

Contents of View(other than the new install folders)

Feedbacks/add.ctp

add.ctp code

<?php
echo $this->Form->create('Feedback', array('type' => 'file','enctype' => 'multipart/form-data'));?>
<?php
echo $this->Form->input($modelNameField . '.date_created',array('type' => 'text',    'value' => date('Y-m-d H:i:s'), 'readonly' => 'readonly'));
?>
<?php                              

echo $this->Form->end(__('Submit', true));

?>

I also have the BoostCake plugin. Following lines in my AppController

var $helpers = array('Html' => array('className' => 'BoostCake.BoostCakeHtml'),
    'Form' => array('className' => 'BoostCake.BoostCakeForm'),
    'Paginator' => array('className' => 'BoostCake.BoostCakePaginator'))

This is my default.ctp code

<!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->Html->css('/bootstrap');
    echo $this->Html->css('/bootstrap.min');
    echo $this->Html->css('/bootstrap-responsive');
    echo $this->Html->css('/bootstrap-responsive.min');

    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->fetch('script');
    echo $this->Html->script('/bootstrap');
    echo $this->Html->script('/bootstrap.min');
    echo $this->Html->script('/jquery-1.9.1');

?>
 <title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
    <div id="header">
        <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1>

    </div>
    <div id="content">
          <body>
<h1>Hello, world!</h1>

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

Solution: Apache's mod_rewrite was not working properly. Had to reset the apache configuration. Thanks for all the help!

Haven't worked in cakephp since 1.3.8, so not sure as to what I'm missing. — Vedun23
@Anubhav My full app path is C:\wamp\www\repository\trunk\boostrap\app — Vedun23
then your path in url would be localhost/repository/trunk/boostrap and url for css file should be /bootstrap/bootstrap.css. is it true? — Anubhav
file:///C:/wamp/www/repository/trunk/boostrap/app/webroot/css/ — Vedun23

floriank floriank · Accepted Answer · 2014-01-29T17:35:12

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

Is wrong. This will try to load the file, without the js extension from / instead of /css/. Remove the / in front. Take a look at the manual to see all the options and ways to work with this method.

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

Same rules apply for HtmlHelper::script().

Coming from 1.3 you should read the migration guide.

Twitter Bootstrap 3.0 and CakePHP 2.4.x

1 Answers