PHPackages                             brammo/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 & Helpers](/categories/utility)
4. /
5. brammo/bootstrap-ui

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

brammo/bootstrap-ui
===================

Bootstrap helpers for CakePHP

1.2.0(3mo ago)0121MITPHPPHP >=8.1

Since Nov 30Pushed 3mo agoCompare

[ Source](https://github.com/brammo/bootstrap-ui)[ Packagist](https://packagist.org/packages/brammo/bootstrap-ui)[ Docs](https://github.com/brammo/bootstrap-ui)[ RSS](/packages/brammo-bootstrap-ui/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (6)Versions (3)Used By (1)

Bootstrap helpers
=================

[](#bootstrap-helpers)

[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE)

A [CakePHP](https://cakephp.org/) plugin that extends [FriendsOfCake/bootstrap-ui](https://github.com/FriendsOfCake/bootstrap-ui) with additional Bootstrap 5 view helpers for building responsive UI components.

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

[](#requirements)

- PHP 8.1+
- CakePHP 5.0+
- [FriendsOfCake/bootstrap-ui](https://github.com/FriendsOfCake/bootstrap-ui) 5.0+

Installation
------------

[](#installation)

You can install this plugin using [Composer](https://getcomposer.org):

```
composer require brammo/bootstrap-ui
```

### Load the Plugin

[](#load-the-plugin)

Add the following to your `Application.php`:

```
public function bootstrap(): void
{
    parent::bootstrap();

    $this->addPlugin('Brammo/BootstrapUI');
}
```

Or load via command line:

```
bin/cake plugin load Brammo/BootstrapUI
```

Usage
-----

[](#usage)

Load the helpers in your `AppView.php`:

```
public function initialize(): void
{
    parent::initialize();

    // Load individual helpers
    $this->loadHelper('Brammo/BootstrapUI.Card');
    $this->loadHelper('Brammo/BootstrapUI.Table');
    $this->loadHelper('Brammo/BootstrapUI.Description');
    $this->loadHelper('Brammo/BootstrapUI.Nav');
}
```

---

View Helpers
============

[](#view-helpers)

The plugin provides several view helpers. All helpers use CakePHP's `StringTemplateTrait` for flexible template customization.

Table of Contents
-----------------

[](#table-of-contents)

- [CardHelper](#cardhelper)
- [TableHelper](#tablehelper)
- [DescriptionHelper](#descriptionhelper)
- [NavHelper](#navhelper)
- [Template Customization](#template-customization)

---

CardHelper
----------

[](#cardhelper)

Create Bootstrap card components with optional header and footer sections.

### Basic Usage

[](#basic-usage)

```
// Simple card with body content
echo $this->Card->render('This is the card body content.');

// Card with header
echo $this->Card->render('Card body content', [
    'header' => 'Card Title',
]);

// Card with header and footer
echo $this->Card->render('Card body content', [
    'header' => 'Card Title',
    'footer' => 'Card footer text',
]);
```

### Templates

[](#templates)

The CardHelper uses the following default templates:

TemplateDefault HTML`card``{{content}}``header``{{content}}``body``{{content}}``footer``{{content}}`### Default Classes

[](#default-classes)

ElementDefault Classcard`card`header`card-header`body`card-body`footer`card-footer`### Options

[](#options)

OptionTypeDescription`header`string|nullHeader content`footer`string|nullFooter content`headerAttrs`arrayHTML attributes for the header element`bodyAttrs`arrayHTML attributes for the body element`footerAttrs`arrayHTML attributes for the footer elementOther optionsmixedApplied as HTML attributes to the card element### Examples

[](#examples)

```
// Card with custom classes
echo $this->Card->render('Content', [
    'header' => 'Title',
    'class' => 'card shadow-sm',
]);

// Card with custom body padding
echo $this->Card->render('Content', [
    'bodyAttrs' => ['class' => 'card-body p-4'],
]);

// Card with styled header
echo $this->Card->render('Content', [
    'header' => 'Important Notice',
    'headerAttrs' => ['class' => 'card-header bg-warning text-dark'],
]);

// Card with HTML content
$header = $this->Html->tag('h5', 'User Details', ['class' => 'mb-0']);
$body = $this->element('user_info', ['user' => $user]);
echo $this->Card->render($body, [
    'header' => $header,
    'class' => 'card mb-4',
]);
```

---

TableHelper
-----------

[](#tablehelper)

Build responsive HTML tables with headers and data rows.

### Basic Usage

[](#basic-usage-1)

```
// Define header
$this->Table->header(['ID', 'Name', 'Email', 'Actions']);

// Add rows
$this->Table->row([1, 'John Doe', 'john@example.com', $actions]);
$this->Table->row([2, 'Jane Smith', 'jane@example.com', $actions]);

// Render table
echo $this->Table->render();
```

### Templates

[](#templates-1)

The TableHelper uses the following default templates:

TemplateDefault HTML`wrapper``{{content}}``table``{{content}}``header``{{content}}``body``{{content}}``row``{{content}}``headerCell``{{content}}``bodyCell``{{content}}`### Default Classes

[](#default-classes-1)

ElementDefault Classwrapper`table-responsive`table`table`### Header with Attributes

[](#header-with-attributes)

You can specify attributes for individual header cells:

```
// Using array syntax for cell attributes
$this->Table->header([
    'ID',
    ['Name' => ['class' => 'w-25']],
    ['Email' => ['class' => 'w-50']],
    ['Actions' => ['class' => 'text-end']],
]);

// Alternative syntax
$this->Table->header([
    'ID',
    ['Name', ['class' => 'w-25']],
    ['Email', ['class' => 'w-50']],
    ['Actions', ['class' => 'text-end']],
]);
```

### Row Cells with Attributes

[](#row-cells-with-attributes)

```
$this->Table->row([
    $user->id,
    $user->name,
    $user->email,
    [$actions, ['class' => 'text-end']],
]);
```

### Row Options

[](#row-options)

You can specify HTML attributes for individual rows:

```
// Add row with attributes
$this->Table->row([1, 'John Doe', 'john@example.com'], ['id' => 'row-1', 'class' => 'highlight']);
$this->Table->row([2, 'Jane Smith', 'jane@example.com'], ['data-id' => '2']);
```

### Body Options

[](#body-options)

You can set attributes on the `` element using the `body()` method or via render options:

```
// Using body() method
$this->Table->body(['id' => 'sortable-items', 'class' => 'sortable']);
$this->Table->row([1, 'Item 1']);
$this->Table->row([2, 'Item 2']);
echo $this->Table->render();

// Or via render options
$this->Table->row([1, 'Item 1']);
$this->Table->row([2, 'Item 2']);
echo $this->Table->render([
    'body' => ['id' => 'sortable-items'],
]);
```

### Render Options

[](#render-options)

```
echo $this->Table->render([
    'wrapper' => ['class' => 'table-responsive-lg'],
    'table' => ['class' => 'table table-striped table-hover'],
    'body' => ['id' => 'table-body', 'data-controller' => 'sortable'],
]);
```

### Complete Example

[](#complete-example)

```
// Setup header
$this->Table->header([
    '#',
    'Name',
    'Email',
    'Status',
    ['Actions' => ['class' => 'text-end']],
]);

// Set body options (e.g., for sortable functionality)
$this->Table->body(['id' => 'sortable-users']);

// Add data rows with individual row options
foreach ($users as $user) {
    $status = $user->active
        ? $this->Html->badge('Active', ['class' => 'bg-success'])
        : $this->Html->badge('Inactive', ['class' => 'bg-secondary']);

    $actions = $this->Html->link(['action' => 'edit', $user->id], ['class' => 'btn-primary btn-sm']) . ' ' .
               $this->Form->postLink(['action' => 'delete', $user->id], ['class' => 'btn-danger btn-sm']);

    $this->Table->row([
        $user->id,
        $user->name,
        $user->email,
        $status,
        [$actions, ['class' => 'text-end']],
    ], ['data-id' => $user->id]); // Row options
}

// Render with custom table classes
echo $this->Table->render([
    'table' => ['class' => 'table table-striped table-hover'],
]);
```

---

DescriptionHelper
-----------------

[](#descriptionhelper)

Generate HTML description lists (``) for displaying key-value pairs.

### Basic Usage

[](#basic-usage-2)

```
echo $this->Description
    ->add('Name', 'John Doe')
    ->add('Email', 'john@example.com')
    ->add('Phone', '+1 234 567 890')
    ->render();
```

### Templates

[](#templates-2)

The DescriptionHelper uses the following default templates:

TemplateDefault HTML`list``{{content}}``term``{{content}}``definition``{{content}}`### Options

[](#options-1)

```
echo $this->Description
    ->add('Label', 'Value')
    ->render([
        'list' => ['class' => 'row'],
    ]);
```

### Complete Example

[](#complete-example-1)

```
// Display user details
echo $this->Description
    ->add(__('Username'), h($user->username))
    ->add(__('Email'), h($user->email))
    ->add(__('Role'), h($user->role->name))
    ->add(__('Created'), $user->created->nice())
    ->add(__('Modified'), $user->modified->nice())
    ->render([
        'list' => ['class' => 'dl-horizontal'],
    ]);
```

---

NavHelper
---------

[](#navhelper)

Render Bootstrap 5 nav tabs or pills with built-in JavaScript tab-switching behavior. Supports both in-page tab panels (buttons) and navigational links.

### Basic Usage

[](#basic-usage-3)

```
// Simple tabs with content panels
echo $this->Nav
    ->add('home', 'Home', 'Home content goes here...')
    ->add('profile', 'Profile', 'Profile content goes here...')
    ->add('settings', 'Settings', 'Settings content goes here...')
    ->render();
```

### Pills Style

[](#pills-style)

```
echo $this->Nav
    ->add('tab1', 'Tab 1', 'Content 1')
    ->add('tab2', 'Tab 2', 'Content 2')
    ->render(['type' => 'pills']);
```

### Tabs with Icons

[](#tabs-with-icons)

```
echo $this->Nav
    ->add('home', 'Home', 'Home content', ['icon' => 'house'])
    ->add('profile', 'Profile', 'Profile content', ['icon' => 'person'])
    ->add('settings', 'Settings', 'Settings content', ['icon' => 'gear'])
    ->render();
```

### Navigational Links

[](#navigational-links)

For navigation between pages (no tab panels):

```
echo $this->Nav
    ->addLink('Dashboard', ['controller' => 'Dashboard', 'action' => 'index'], ['active' => true])
    ->addLink('Users', ['controller' => 'Users', 'action' => 'index'])
    ->addLink('Settings', ['controller' => 'Settings', 'action' => 'index'], ['icon' => 'gear'])
    ->renderNav(['type' => 'pills']);
```

### Mixed Tabs and Links

[](#mixed-tabs-and-links)

```
echo $this->Nav
    ->add('details', 'Details', $detailsContent)
    ->add('history', 'History', $historyContent)
    ->addLink('View All', ['action' => 'index'], ['icon' => 'list'])
    ->render();
```

### Methods

[](#methods)

MethodDescription`add($id, $title, $content, $options)`Add a tab with panel content (renders as button)`addLink($title, $url, $options)`Add a navigational link (no panel)`render($options)`Render nav with tab content panels`renderNav($options)`Render nav only (no panels)### Tab/Link Options

[](#tablink-options)

OptionTypeDefaultDescription`icon`string`null`Bootstrap Icons name (e.g., `'house'`, `'gear'`)`active`bool`false`Force this tab/link to be active (first tab is active by default)`disabled`bool`false`Disable the tab/link### Render Options

[](#render-options-1)

OptionTypeDefaultDescription`type`string`'tabs'`Nav type: `'tabs'` or `'pills'``fade`bool`true`Enable fade animation on tab switch`fill`bool`false`Make nav items fill available width`justified`bool`false`Make nav items equal width`vertical`bool`false`Render nav vertically with flex layout`navAttrs`array`[]`HTML attributes for the nav element`contentAttrs`array`[]`HTML attributes for the tab-content wrapper### Templates

[](#templates-3)

The NavHelper uses the following default templates:

TemplateDefault HTML`nav``{{content}}``navItem``{{content}}``navButton``{{content}}``navLink``{{content}}``tabContent``{{content}}``tabPane``{{content}}`### Default Classes

[](#default-classes-2)

ElementDefault Classesnav`nav nav-tabs` or `nav nav-pills`navItem`nav-item`navButton`nav-link`navLink`nav-link`tabContent`tab-content`tabPane`tab-pane fade`### Accessibility

[](#accessibility)

The helper automatically includes proper ARIA attributes:

- Nav: `role="tablist"`
- Nav item: `role="presentation"`
- Button: `role="tab"`, `aria-controls`, `aria-selected`
- Tab pane: `role="tabpanel"`, `tabindex="0"`, `aria-labelledby`
- Disabled: `aria-disabled="true"`, `tabindex="-1"`
- Active link: `aria-current="page"`

### Bootstrap 5 Integration

[](#bootstrap-5-integration)

Tab switching is handled automatically by Bootstrap 5's JavaScript via data attributes:

- `data-bs-toggle="tab"` on buttons
- `data-bs-target="#panel-id"` pointing to the tab pane

No additional JavaScript is required.

### Complete Examples

[](#complete-examples)

#### User Profile Tabs

[](#user-profile-tabs)

```
// Define tab content
$personalInfo = $this->element('user/personal_info', ['user' => $user]);
$security = $this->element('user/security', ['user' => $user]);
$preferences = $this->element('user/preferences', ['user' => $user]);

// Render tabs
echo $this->Nav
    ->add('personal', 'Personal Info', $personalInfo, ['icon' => 'person'])
    ->add('security', 'Security', $security, ['icon' => 'shield-lock'])
    ->add('preferences', 'Preferences', $preferences, ['icon' => 'sliders'])
    ->render(['type' => 'pills', 'fill' => true]);
```

#### Vertical Tabs

[](#vertical-tabs)

```
echo $this->Nav
    ->add('overview', 'Overview', $overviewContent)
    ->add('analytics', 'Analytics', $analyticsContent)
    ->add('reports', 'Reports', $reportsContent)
    ->add('settings', 'Settings', $settingsContent, ['icon' => 'gear'])
    ->render(['type' => 'pills', 'vertical' => true]);
```

#### Navigation Menu

[](#navigation-menu)

```
echo $this->Nav
    ->addLink('All Users', ['action' => 'index'], ['active' => $this->request->getParam('action') === 'index'])
    ->addLink('Active', ['action' => 'index', '?' => ['status' => 'active']])
    ->addLink('Inactive', ['action' => 'index', '?' => ['status' => 'inactive']])
    ->addLink('Add New', ['action' => 'add'], ['icon' => 'plus'])
    ->renderNav(['type' => 'pills']);
```

---

Template Customization
----------------------

[](#template-customization)

All helpers use CakePHP's `StringTemplateTrait`, allowing you to customize templates at runtime or through configuration.

### Runtime Customization

[](#runtime-customization)

```
// Customize CardHelper templates
$this->Card->setTemplates([
    'card' => '{{content}}',
    'header' => '{{content}}',
    'body' => '{{content}}',
    'footer' => '{{content}}',
]);

// Customize TableHelper templates
$this->Table->setTemplates([
    'wrapper' => '{{content}}',
    'table' => '{{content}}',
]);
```

### Configuration-based Customization

[](#configuration-based-customization)

In your `AppView.php`:

```
public function initialize(): void
{
    parent::initialize();

    $this->loadHelper('Brammo/BootstrapUI.Card', [
        'templates' => [
            'card' => '{{content}}',
        ],
    ]);
}
```

### Template Placeholders

[](#template-placeholders)

PlaceholderDescription`{{attrs}}`HTML attributes formatted as string`{{content}}`Inner content---

Tests
-----

[](#tests)

Run the test suite with PHPUnit:

```
composer test
```

### Code Quality

[](#code-quality)

Run code style checks:

```
composer cs-check
```

Fix code style issues:

```
composer cs-fix
```

### Static Analysis

[](#static-analysis)

Run PHPStan and Psalm:

```
composer analyse
```

Or run them individually:

```
composer stan
composer psalm
```

---

License
-------

[](#license)

This plugin is licensed under the [MIT License](LICENSE).

Author
------

[](#author)

Roman Sidorkin -

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance79

Regular maintenance activity

Popularity5

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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 ~56 days

Total

2

Last Release

113d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/71d3e402b895916793618f083d30b98a4d2b78aa4159b4029546dedf8f2864d4?d=identicon)[brammo](/maintainers/brammo)

---

Top Contributors

[![brammo](https://avatars.githubusercontent.com/u/4863506?v=4)](https://github.com/brammo "brammo (5 commits)")

---

Tags

pluginhelpercakephpbootstrap

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan, Psalm

Type Coverage Yes

### Embed Badge

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

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

###  Alternatives

[dereuromark/cakephp-tools

A CakePHP plugin containing lots of useful and reusable tools

338920.1k32](/packages/dereuromark-cakephp-tools)[cakedc/tiny-mce

TinyMCE Plugin for CakePHP

10790.2k](/packages/cakedc-tiny-mce)[dereuromark/cakephp-calendar

A CakePHP plugin to easily create calendars.

1646.8k1](/packages/dereuromark-cakephp-calendar)[dereuromark/cakephp-dto

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

2988.9k3](/packages/dereuromark-cakephp-dto)[dereuromark/cakephp-geo

A CakePHP plugin around geocoding tools and helpers.

51174.9k4](/packages/dereuromark-cakephp-geo)[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)