PHPackages                             funayaki/bootstrap-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. funayaki/bootstrap-ui

ActiveCakephp-plugin[Utility &amp; Helpers](/categories/utility)

funayaki/bootstrap-ui
=====================

Twitter Bootstrap 3 support for CakePHP 3

1.4.0(8y ago)016MITPHP

Since Mar 27Pushed 8y ago1 watchersCompare

[ Source](https://github.com/funayaki/bootstrap-ui)[ Packagist](https://packagist.org/packages/funayaki/bootstrap-ui)[ Docs](http://github.com/friendsofcake/bootstrap-ui)[ RSS](/packages/funayaki-bootstrap-ui/feed)WikiDiscussions adminlte Synced 2d ago

READMEChangelogDependencies (3)Versions (27)Used By (0)

Bootstrap UI
============

[](#bootstrap-ui)

[![Build Status](https://camo.githubusercontent.com/f8843b41b02f5dcdbb8e7333d3c51813b1ebb9550a3047cdcff6efd3f3ab60e5/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f66756e6179616b692f626f6f7473747261702d75692f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/funayaki/bootstrap-ui)[![Coverage Status](https://camo.githubusercontent.com/6a44c82131b169ed271d019bd7cfb2c2bea50478823f61da31571c0c81569722/68747470733a2f2f696d672e736869656c64732e696f2f636f766572616c6c732f66756e6179616b692f626f6f7473747261702d75692f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://coveralls.io/r/funayaki/bootstrap-ui?branch=master)[![Total Downloads](https://camo.githubusercontent.com/850d32d6da772e956ea0d0d5917a021d65d82ecf29a2e45ee022655f5a857616/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f66756e6179616b692f626f6f7473747261702d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/funayaki/bootstrap-ui)[![License](https://camo.githubusercontent.com/942e017bf0672002dd32a857c95d66f28c5900ab541838c6c664442516309c8a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/funayaki/bootstrap-ui)

Transparently use [AdminLTE 2](https://adminlte.io) with [CakePHP 3](http://cakephp.org).

Requirements
------------

[](#requirements)

- CakePHP 3.x
- AdminLTE 2.x
- jQuery 1.9+

What's included?
----------------

[](#whats-included)

- FlashComponent + elements (types: error, info, success, warning)
- FormHelper (align: default, inline, horizontal)
- HtmlHelper (components: breadcrumbs, badge, label, icon)
- PaginatorHelper
- Widgets (basic, radio, button, select, textarea)
- Sample layouts (cover, signin, dashboard)
- Bake templates *incomplete*

Installing Using [Composer](http://getcomposer.org)
---------------------------------------------------

[](#installing-using-composer)

`cd` to the root of your app folder (where the `composer.json` file is) and run the following command:

```
composer require funayaki/bootstrap-ui

```

Then load the plugin by adding the following to your app's `config/boostrap.php`:

```
\Cake\Core\Plugin::load('BootstrapUI');
```

or using CakePHP's console:

```
./bin/cake plugin load BootstrapUI

```

Usage
-----

[](#usage)

You will need to modify your `src/View/AppView` class to either extend `BootstrapUI\View\UIView` or use the trait `BootStrapUI\View\UIViewTrait`.

### AppView Setup

[](#appview-setup)

For a quick setup, just make your `AppView` class extend `BootstrapUI\View\UIView`. The base class will handle the initializing and loading of the BootstrapUI `layout.ctp` for your app.

The `src\View\AppView.php` will look something like the following:

```
namespace App\View;

use BootstrapUI\View\UIView;

class AppView extends UIView
{

    /**
     * Initialization hook method.
     */
    public function initialize()
    {
        //Don't forget to call the parent::initialize()
        parent::initialize();
    }
}
```

### AppView Setup Using UIViewTrait

[](#appview-setup-using-uiviewtrait)

If you're adding BootstrapUI to an existing application. It might be easier to use the trait, as it gives you more control over the loading of the layout.

```
namespace App\View;

use BootstrapUI\View\UIViewTrait;
use Cake\View\View;

class AppView extends View
{
    use UIViewTrait;

    /**
     * Initialization hook method.
     */
    public function initialize()
    {
        //render the initializeUI method from the UIViewTrait
        $this->initializeUI();
    }
}
```

BootstrapUI Layout
------------------

[](#bootstrapui-layout)

BootstrapUI comes with its own `layout.ctp` file and examples taken from the Bootstrap framework.

When no layout for the view is defined the `BootstrapUI\View\UIViewTrait` will load its own `layout.ctp` file. You can override this behavior in two ways.

- Assign a layout to the view with `$this->layout('layout')`.
- Disable auto loading of the layout in `BootstrapUI\View\UIViewTrait` with `$this->initializeUI(['layout' => false]);`.

### Loading the Bootstrap framework

[](#loading-the-bootstrap-framework)

If you wish to use your own layout template, just make sure to include:

```
// in the
echo $this->Html->css('path/to/bootstrap.css');
echo $this->Html->script(['path/to/jquery.js', 'path/to/bootstrap.js']);
```

When using the BootstrapUI layout (or a copy of it), extra layout types (directly taken from the Bootstrap examples). You just need to copy them to your application's layouts directory:

```
cp -R vendor/funayaki/bootstrap-ui/src/Template/Layout/examples src/Template/Layout/TwitterBootstrap

```

You can then simply extend them in your views like so:

```
$this->extend('../Layout/TwitterBootstrap/dashboard');

```

Available types are:

- cover
- signin
- dashboard
- blog *coming soon*

**NOTE: Remember to set the stylesheets in the layouts you copy.**

Installing Bootstrap via Bower
------------------------------

[](#installing-bootstrap-via-bower)

A quick way of getting the Bootstrap assets installed is using [bower](http://bower.io). Assuming you are in `ROOT`:

```
bower install bootstrap
bower install jquery
mkdir -p webroot/css/bootstrap webroot/js/bootstrap webroot/js/jquery webroot/css/fonts
cp bower_components/bootstrap/dist/css/* webroot/css/bootstrap/.
cp bower_components/bootstrap/dist/js/* webroot/js/bootstrap/.
cp bower_components/jquery/dist/* webroot/js/jquery/.
cp bower_components/bootstrap/dist/fonts/* webroot/css/fonts/.
echo /bower_components >> .gitignore
git add .gitignore \
bower.json \
webroot/css/bootstrap \
webroot/js/bootstrap \
webroot/js/jquery

```

Console Bake
------------

[](#console-bake)

For those of you who want even more automation, some bake templates have been included. Use them like so:

```
$ bin/cake bake.bake [subcommand] -t BootstrapUI

```

Helper Usage
------------

[](#helper-usage)

At the core of BootstrapUI is a collection of enhancements for CakePHP core helpers. These helpers replace the HTML templates used to render elements for the views. This allows you to create forms and components that use the Bootstrap styles.

The current list of enhanced helpers are:

- `BootstrapUI\View\Helper\FlashHelper`
- `BootstrapUI\View\Helper\FormHelper`
- `BootstrapUI\View\Helper\HtmlHelper`
- `BootstrapUI\View\Helper\PaginatorHelper`
- `BootstrapUI\View\Helper\BreadcrumbsHelper`

When the `BootstrapUI\View\UIViewTrait` is initialized it loads the above helpers with the same aliases as the CakePHP core helpers. That means that when you use `$this->Form->create()` in your views. The helper being used is from the BootstrapUI plugin.

### Basic Form

[](#basic-form)

```
echo $this->Form->create($article);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
```

will render this HTML:

```

        Title

            Published

```

### Horizontal Form

[](#horizontal-form)

```
echo $this->Form->create($article, ['align' => [
    'sm' => [
        'left' => 6,
        'middle' => 6,
        'right' => 12
    ],
    'md' => [
        'left' => 4,
        'middle' => 4,
        'right' => 4
    ]
]]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
```

will render this HTML:

```

        Title

                Published

```

### Configuration

[](#configuration)

You can configure each of the helpers by passing in extra parameters through the AppView.php.

Here is an example of changing the `prev` and `next` labels for the PaginatorHelper.

```
$this->loadHelper(
    'Paginator',
    [
        'className' => 'BootstrapUI.Paginator',
        'labels' => [
            'prev' => 'previous',
            'next' => 'next',
        ]
    ]
);
```

To style auth flash messages properly set the `flash` key in `AuthComponent` config as shown:

```
        $this->loadComponent('Auth', [
            'flash' => [
                'element' => 'error',
                'key' => 'auth'
            ],
            ...

```

**NOTE: Check tests for more examples.**

Testing
-------

[](#testing)

You can run the tests for BootstrapUI by doing the following:

```
    $ composer install
    $ ./vendor/bin/phpunit

```

Patches &amp; Features
----------------------

[](#patches--features)

- Fork
- Mod, fix
- Test - this is important, so it's not unintentionally broken
- Commit - do not mess with license, todo, version, etc. (if you do change any, bump them into commits of their own that I can ignore when I pull)
- Pull request - bonus point for topic branches

To ensure your PRs are considered for upstream, you MUST follow the CakePHP coding standards. A `pre-commit`hook has been included to automatically run the code sniffs for you. From your project's root directory:

```
cp ./contrib/pre-commit .git/hooks/
chmod 755 .git/hooks/pre-commit

```

Bugs &amp; Feedback
-------------------

[](#bugs--feedback)

License
-------

[](#license)

Copyright (c) 2015, Jad Bitar and licensed under [The MIT License](http://www.opensource.org/licenses/mit-license.php).

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity73

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~48 days

Recently: every ~66 days

Total

24

Last Release

2941d ago

Major Versions

v0.6.2 → 1.0.02017-03-15

1.3.0 → 2.0.0-beta12018-04-07

1.4.0 → 2.0.0-beta22018-04-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/7eac05b31b47cce78a6dfdc727bfbecb290bb12b1591cc5be7e1ce63e25666d5?d=identicon)[tsmsogn](/maintainers/tsmsogn)

---

Top Contributors

[![ADmad](https://avatars.githubusercontent.com/u/142658?v=4)](https://github.com/ADmad "ADmad (134 commits)")[![jadb](https://avatars.githubusercontent.com/u/33527?v=4)](https://github.com/jadb "jadb (130 commits)")[![josegonzalez](https://avatars.githubusercontent.com/u/65675?v=4)](https://github.com/josegonzalez "josegonzalez (32 commits)")[![eymen-elkum](https://avatars.githubusercontent.com/u/2862528?v=4)](https://github.com/eymen-elkum "eymen-elkum (23 commits)")[![lorenzo](https://avatars.githubusercontent.com/u/37621?v=4)](https://github.com/lorenzo "lorenzo (8 commits)")[![dereuromark](https://avatars.githubusercontent.com/u/39854?v=4)](https://github.com/dereuromark "dereuromark (7 commits)")[![Nic0tiN](https://avatars.githubusercontent.com/u/978619?v=4)](https://github.com/Nic0tiN "Nic0tiN (7 commits)")[![balcsida](https://avatars.githubusercontent.com/u/1768446?v=4)](https://github.com/balcsida "balcsida (7 commits)")[![AD7six](https://avatars.githubusercontent.com/u/33387?v=4)](https://github.com/AD7six "AD7six (6 commits)")[![dakota](https://avatars.githubusercontent.com/u/83255?v=4)](https://github.com/dakota "dakota (6 commits)")[![steefaan](https://avatars.githubusercontent.com/u/5982785?v=4)](https://github.com/steefaan "steefaan (5 commits)")[![cewi](https://avatars.githubusercontent.com/u/1643900?v=4)](https://github.com/cewi "cewi (5 commits)")[![broot02](https://avatars.githubusercontent.com/u/7757740?v=4)](https://github.com/broot02 "broot02 (3 commits)")[![martonmiklos](https://avatars.githubusercontent.com/u/1609182?v=4)](https://github.com/martonmiklos "martonmiklos (3 commits)")[![tsmsogn](https://avatars.githubusercontent.com/u/595966?v=4)](https://github.com/tsmsogn "tsmsogn (3 commits)")[![monsurhoq](https://avatars.githubusercontent.com/u/7543998?v=4)](https://github.com/monsurhoq "monsurhoq (3 commits)")[![hiryu85](https://avatars.githubusercontent.com/u/406275?v=4)](https://github.com/hiryu85 "hiryu85 (2 commits)")[![CodeBlastr](https://avatars.githubusercontent.com/u/393946?v=4)](https://github.com/CodeBlastr "CodeBlastr (2 commits)")[![jtraulle](https://avatars.githubusercontent.com/u/613615?v=4)](https://github.com/jtraulle "jtraulle (2 commits)")[![ukkpower](https://avatars.githubusercontent.com/u/1074922?v=4)](https://github.com/ukkpower "ukkpower (1 commits)")

---

Tags

cakephptwitterbootstrap

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/funayaki-bootstrap-ui/health.svg)

```
[![Health](https://phpackages.com/badges/funayaki-bootstrap-ui/health.svg)](https://phpackages.com/packages/funayaki-bootstrap-ui)
```

###  Alternatives

[cwspear/bootstrap-hover-dropdown

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

1.3k153.1k](/packages/cwspear-bootstrap-hover-dropdown)[slywalker/twitter_bootstrap

CakePHP Bootstrap (for Twitter) Plugin

28532.2k](/packages/slywalker-twitter-bootstrap)[dereuromark/cakephp-tools

A CakePHP plugin containing lots of useful and reusable tools

338920.1k32](/packages/dereuromark-cakephp-tools)[mediawiki/chameleon-skin

A highly flexible MediaWiki skin using Bootstrap 4

12481.8k2](/packages/mediawiki-chameleon-skin)[dereuromark/cakephp-dto

A CakePHP plugin for generating immutable Data Transfer Objects with full type safety

2988.9k3](/packages/dereuromark-cakephp-dto)[codaxis/cakephp-bootstrap3-helpers

CakePHP highly configurable helpers for Bootstrap 3 framework.

4111.5k2](/packages/codaxis-cakephp-bootstrap3-helpers)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
