{"id":13684605,"url":"https://github.com/friendsofcake/bootstrap-ui","last_synced_at":"2025-05-15T09:06:17.994Z","repository":{"id":25272126,"uuid":"28697596","full_name":"FriendsOfCake/bootstrap-ui","owner":"FriendsOfCake","description":"CakePHP: Transparently use Bootstrap","archived":false,"fork":false,"pushed_at":"2025-05-05T12:42:56.000Z","size":1729,"stargazers_count":345,"open_issues_count":8,"forks_count":146,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-05-15T09:06:17.232Z","etag":null,"topics":["bootstrap","cakephp","cakephp-plugin","php"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FriendsOfCake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-01-01T22:44:43.000Z","updated_at":"2025-05-05T12:42:58.000Z","dependencies_parsed_at":"2025-04-14T14:49:33.254Z","dependency_job_id":"ef5fe0a1-c773-45dd-a9a4-bdac64cb1dd6","html_url":"https://github.com/FriendsOfCake/bootstrap-ui","commit_stats":{"total_commits":772,"total_committers":62,"mean_commits":"12.451612903225806","dds":0.8044041450777202,"last_synced_commit":"bd656983263adfee9888f7539bb4afa030659f13"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfCake%2Fbootstrap-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfCake%2Fbootstrap-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfCake%2Fbootstrap-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfCake%2Fbootstrap-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfCake","download_url":"https://codeload.github.com/FriendsOfCake/bootstrap-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","cakephp","cakephp-plugin","php"],"created_at":"2024-08-02T14:00:35.498Z","updated_at":"2025-05-15T09:06:17.969Z","avatar_url":"https://github.com/FriendsOfCake.png","language":"PHP","readme":"# Bootstrap UI\n\n[![Build Status][ico-ga]][ga]\n[![Coverage Status][ico-coverage]][coverage]\n[![Total Downloads][ico-downloads]][package]\n[![License][ico-license]][license]\n\n[ico-ga]: https://img.shields.io/github/actions/workflow/status/FriendsOfCake/bootstrap-ui/ci.yml?branch=master\u0026style=flat-square\n[ico-coverage]: https://img.shields.io/codecov/c/github/FriendsOfCake/bootstrap-ui.svg?style=flat-square\n[ico-downloads]: https://img.shields.io/packagist/dt/friendsofcake/bootstrap-ui.svg?style=flat-square\n[ico-license]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n\n[ga]: https://github.com/FriendsOfCake/bootstrap-ui/actions?query=workflow%3ACI+branch%3Amaster\n[coverage]: https://codecov.io/github/FriendsOfCake/bootstrap-ui\n[package]: https://packagist.org/packages/friendsofcake/bootstrap-ui\n[license]: LICENSE.txt\n\nTransparently use [Bootstrap 5][bs] with [CakePHP 5][cakephp].\n\nFor version info see [version map](https://github.com/FriendsOfCake/bootstrap-ui/wiki#version-map).\n\n## Requirements\n\n* CakePHP 5.x\n* Bootstrap 5.3.x\n* npm 6.x\n* Bootstrap Icons 1.11.x\n\n## What's included?\n\n- FlashHelper (element types: `error`, `info`, `success`, `warning`)\n- FormHelper (align: `default`, `inline`, `horizontal`)\n- BreadcrumbsHelper\n- HtmlHelper (components: `badge`, `icon`)\n- PaginatorHelper\n- Widgets (`basic`, `button`, `datetime`, `file`, `select`, `textarea`)\n- Example layouts (`cover`, `signin`, `dashboard`)\n- Bake templates\n\n## Table of contents\n\n- [Installation](#installation)\n- [Setup](#setup)\n  - [Using the Bootstrap commands](#using-the-bootstrap-commands)\n  - [Manual setup](#manual-setup)\n  - [BootstrapUI layouts](#bootstrapui-layouts)\n  - [Including the Bootstrap framework](#including-the-bootstrap-framework)\n- [Bake templates](#bake-templates)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n`cd` to the root of your app folder (where the `composer.json` file is) and run the following [Composer][composer]\ncommand:\n\n```\ncomposer require friendsofcake/bootstrap-ui\n```\n\nThen load the plugin using CakePHP's console:\n\n```\nbin/cake plugin load BootstrapUI\n```\n\n## Setup\n\nYou can either use the Bootstrap commands to make the necessary changes, or do them manually.\n\n### Using the Bootstrap commands\n\n1. To install the Bootstrap assets (Bootstrap's CSS/JS files) via npm you can use the `install`\n   command, or [install them manually](#installing-bootstrap-assets-via-npm):\n\n   ```\n   bin/cake bootstrap install\n   ```\n\n   This will fetch all assets, copy the distribution assets to the BootstrapUI plugin's webroot directory, and symlink\n   (or copy) them to your application's `webroot` directory.\n\n   If you want to install the latest minor versions of the assets instead of the exact pinned ones, you can use the\n   `--latest` option:\n\n   ```\n   bin/cake bootstrap install --latest\n   ```\n\n2. You will need to modify your `src/View/AppView` class to either extend `BootstrapUI\\View\\UIView` or\n   use the trait `BootStrapUI\\View\\UIViewTrait`. For doing this you can either use the `modify_view` command, or\n   [change your view manually](#appview-setup-using-uiview):\n\n   ```\n   bin/cake bootstrap modify_view\n   ```\n\n   This will rewrite your `src/View/AppView` like described in [AppView setup using UIView](#appview-setup-using-uiview).\n\n3. BootstrapUI ships with some example layouts. You can install them using the `copy_layouts` command, or\n   [copy them manually](#copying-example-layouts):\n\n   ```\n   bin/cake bootstrap copy_layouts\n   ```\n\n   This will copy the three example layouts `cover.php`, `dashboard.php` and `signin.php` to your application's\n   `src/templates/layout/TwitterBootstrap`.\n\n### Manual setup\n\n#### Installing Bootstrap assets via npm\n\nThe [the `install` command](#using-the-bootstrap-commands) installs the Bootstrap assets via [npm], which you can also\ndo manually if you wish to control which assets are being included, and where they are placed.\n\nAssuming you are in your application's root:\n\n```\nnpm install bootstrap@5 bootstrap-icons@1\nmkdir -p webroot/css\nmkdir -p webroot/font/fonts\nmkdir -p webroot/js\ncp node_modules/bootstrap/dist/css/bootstrap.css webroot/css/\ncp node_modules/bootstrap/dist/css/bootstrap.min.css webroot/css/\ncp node_modules/bootstrap/dist/js/bootstrap.bundle.js webroot/js/\ncp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js webroot/js/\ncp node_modules/bootstrap-icons/font/bootstrap-icons.css webroot/font/\ncp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff webroot/font/fonts/\ncp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2 webroot/font/fonts/\ncp vendor/friendsofcake/bootstrap-ui/webroot/font/bootstrap-icon-sizes.css webroot/font/\n```\n\n#### AppView setup using UIView\n\nFor a quick setup, just make your `AppView` class extend `BootstrapUI\\View\\UIView`. The base class will handle\nthe initializing and loading of the BootstrapUI `default.php` layout for your app.\n\nThe `src\\View\\AppView.php` will look something like the following:\n\n```php\ndeclare(strict_types=1);\n\nnamespace App\\View;\n\nuse BootstrapUI\\View\\UIView;\n\nclass AppView extends UIView\n{\n    /**\n     * Initialization hook method.\n     */\n    public function initialize(): void\n    {\n        // Don't forget to call parent::initialize()\n        parent::initialize();\n    }\n}\n```\n\n#### AppView setup using UIViewTrait\n\nIf you're adding BootstrapUI to an existing application, it might be easier to use the trait, as it gives you more\ncontrol over the loading of the layout.\n\n```php\ndeclare(strict_types=1);\n\nnamespace App\\View;\n\nuse BootstrapUI\\View\\UIViewTrait;\nuse Cake\\View\\View;\n\nclass AppView extends View\n{\n    use UIViewTrait;\n\n    /**\n     * Initialization hook method.\n     */\n    public function initialize(): void\n    {\n        parent::initialize();\n\n        // Call the initializeUI method from UIViewTrait\n        $this-\u003einitializeUI();\n    }\n}\n```\n\n#### Copying example layouts\n\nIn order to be able to use the BootstrapUI example layouts (directly taken from the Bootstrap examples), they need to be\ncopied to your application's layouts directory, either by using\n[the `copy_layouts` command](#using-the-bootstrap-commands), or by copying the files manually:\n\n```\ncp -R vendor/friendsofcake/bootstrap-ui/templates/layout/examples templates/layout/TwitterBootstrap\n```\n\n### BootstrapUI layouts\n\nBootstrapUI comes with its own `default.php` layout file and examples taken from the Bootstrap framework.\n\nWhen no layout for the view is defined, the `BootstrapUI\\View\\UIViewTrait` will load its own `default.php` layout file.\nYou can override this behavior in two ways.\n\n- Assign a layout to the template with `$this-\u003esetLayout('layout')`.\n- Disable auto loading of the layout in `BootstrapUI\\View\\UIViewTrait` by adding `$this-\u003einitializeUI(['layout' =\u003e false]);` to your `AppView`'s `initialize()` function.\n\n#### Using the example layouts\n\nOnce copied into your application's layouts directory (being it via\n[the `copy_layouts` command](#using-the-bootstrap-commands) or [manually](#copying-example-layouts)), you can simply\nextend the example layouts in your views like so:\n\n```\n$this-\u003eextend('../layout/TwitterBootstrap/dashboard');\n```\n\nAvailable types are:\n\n- `cover`\n- `signin`\n- `dashboard`\n\n**NOTE: Remember to set the stylesheets in the layouts you copy.**\n\n### Including the Bootstrap framework\n\nIf you are using [the BoostrapUI plugin's default layout](#bootstrapui-layouts), and you have installed the Bootstrap\nassets using [the `install` command](#using-the-bootstrap-commands), the required assets should automatically be\nincluded.\n\nIf you wish to use your own layout template, then you need to take care of including the required CSS/JS files yourself.\n\nIf you have installed the assets using [the `install` command](#using-the-bootstrap-commands), you can refer to\nthem using the standard plugin syntax:\n\n```php\n// in the \u003chead\u003e\necho $this-\u003eHtml-\u003ecss('BootstrapUI.bootstrap.min');\necho $this-\u003eHtml-\u003ecss(['BootstrapUI./font/bootstrap-icons', 'BootstrapUI./font/bootstrap-icon-sizes']);\necho $this-\u003eHtml-\u003escript(['BootstrapUI.bootstrap.bundle.min']);\n```\n\nIf you have installed the assets manually, you'll need to use paths accordingly. With\n[the example copy commands](#installing-bootstrap-assets-via-npm) you could use the standard short path syntax:\n\n```php\necho $this-\u003eHtml-\u003ecss('bootstrap.min');\necho $this-\u003eHtml-\u003ecss(['/font/bootstrap-icons', '/font/bootstrap-icon-sizes']);\necho $this-\u003eHtml-\u003escript(['bootstrap.bundle.min']);\n```\n\nIf you're using paths that don't adhere to the CakePHP conventions, you'll have to explicitly specify them:\n\n```php\necho $this-\u003eHtml-\u003ecss('/path/to/bootstrap.css');\necho $this-\u003eHtml-\u003ecss(['/path/to/bootstrap-icons.css', '/path/to/bootstrap-icon-sizes.css']);\necho $this-\u003eHtml-\u003escript(['/path/to/bootstrap.bundle.js']);\n```\n\n## Bake templates\n\nFor those of you who want even more automation, some bake templates have been included. Use them like so:\n\n```\nbin/cake bake [subcommand] -t BootstrapUI\n```\n\nCurrently, bake templates for the following bake subcommands are included:\n\n### `template`\n\nAdditionally to the default `index`, `add`, `edit`, and `view` templates, a `login` template is available too. While\nthe default CRUD action view templates can be utilized like this:\n\n```bash\nbin/cake bake template ControllerName -t BootstrapUI\n```\n\nthe `login` template has to be used explicitly by specifying the action name:\n\n```bash\nbin/cake bake template ControllerName login -t BootstrapUI\n```\n\n## Usage\n\nAt the core of BootstrapUI is a collection of enhancements for CakePHP core helpers. Among other things, these helpers\nreplace the HTML templates used to render elements for the views. This allows you to create forms and components that\nuse the Bootstrap styles.\n\nThe current list of enhanced helpers are:\n\n- `BootstrapUI\\View\\Helper\\FlashHelper`\n- `BootstrapUI\\View\\Helper\\FormHelper`\n- `BootstrapUI\\View\\Helper\\HtmlHelper`\n- `BootstrapUI\\View\\Helper\\PaginatorHelper`\n- `BootstrapUI\\View\\Helper\\BreadcrumbsHelper`\n\nWhen the `BootstrapUI\\View\\UIViewTrait` is initialized it loads the above helpers with the same aliases as the\nCakePHP core helpers. That means that when you use `$this-\u003eForm-\u003ecreate()` in your views, the helper being used\nis from the BootstrapUI plugin.\n\n### Basic forms\n\n```php\necho $this-\u003eForm-\u003ecreate($article);\necho $this-\u003eForm-\u003econtrol('title');\necho $this-\u003eForm-\u003econtrol('published', ['type' =\u003e 'checkbox']);\necho $this-\u003eForm-\u003ebutton('Submit');\necho $this-\u003eForm-\u003eend();\n```\n\nwill render this HTML:\n\n```html\n\u003cform method=\"post\" accept-charset=\"utf-8\" action=\"/articles/add\"\u003e\n    \u003c!-- ... --\u003e\n    \u003cdiv class=\"mb-3 text\"\u003e\n        \u003clabel class=\"form-label\" for=\"title\"\u003eTitle\u003c/label\u003e\n        \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3 form-check checkbox\"\u003e\n        \u003cinput type=\"hidden\" name=\"published\" value=\"0\"\u003e\n        \u003cinput type=\"checkbox\" class=\"form-check-input\" name=\"published\" value=\"1\" id=\"published\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"published\"\u003ePublished\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-secondary\"\u003eSubmit\u003c/button\u003e\n    \u003c!-- ... --\u003e\n\u003c/form\u003e\n```\n\n### Horizontal forms\n\nHorizontal forms automatically render labels and controls in separate columns (where applicable), labels in th first\none, and controls in the second one.\n\nAlignment can be configured via the `align` option, which takes either a list of column sizes for the `md`\n[Bootstrap screen-size/breakpoint](https://getbootstrap.com/docs/5.3/layout/breakpoints/), or a matrix of\nscreen-size/breakpoint names and column sizes.\n\nThe following will use the default `md` screen-size/breakpoint:\n\n```php\nuse BootstrapUI\\View\\Helper\\FormHelper;\n\necho $this-\u003eForm-\u003ecreate($article, [\n    'align' =\u003e [\n        FormHelper::GRID_COLUMN_ONE =\u003e 4, // first column (span over 4 columns)\n        FormHelper::GRID_COLUMN_TWO =\u003e 8, // second column (span over 8 columns)\n    ],\n]);\necho $this-\u003eForm-\u003econtrol('title');\necho $this-\u003eForm-\u003econtrol('published', ['type' =\u003e 'checkbox']);\necho $this-\u003eForm-\u003esubmit();\necho $this-\u003eForm-\u003eend();\n```\n\nIt will render this HTML:\n\n```html\n\u003cform method=\"post\" accept-charset=\"utf-8\" class=\"form-horizontal\" action=\"/articles/add\"\u003e\n    \u003c!-- ... --\u003e\n    \u003cdiv class=\"mb-3 row text\"\u003e\n        \u003clabel class=\"col-form-label col-md-4\" for=\"title\"\u003eTitle\u003c/label\u003e\n        \u003cdiv class=\"col-md-8\"\u003e\n            \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3 row checkbox\"\u003e\n        \u003cdiv class=\"offset-md-4 col-md-8\"\u003e\n            \u003cdiv class=\"form-check\"\u003e\n                \u003cinput type=\"hidden\" name=\"published\" value=\"0\"/\u003e\n                \u003cinput type=\"checkbox\" name=\"published\" value=\"1\" id=\"published\" class=\"form-check-input\"/\u003e\n                \u003clabel class=\"form-check-label\" for=\"published\"\u003ePublished\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- ... --\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-secondary\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nThe following uses a matrix of screen-sizes/breakpoints and column sizes:\n\n```php\nuse BootstrapUI\\View\\Helper\\FormHelper;\n\necho $this-\u003eForm-\u003ecreate($article, [\n    'align' =\u003e [\n        // column sizes for the `sm` screen-size/breakpoint\n        'sm' =\u003e [\n            FormHelper::GRID_COLUMN_ONE =\u003e 6,\n            FormHelper::GRID_COLUMN_TWO =\u003e 6,\n        ],\n        // column sizes for the `md` screen-size/breakpoint\n        'md' =\u003e [\n            FormHelper::GRID_COLUMN_ONE =\u003e 4,\n            FormHelper::GRID_COLUMN_TWO =\u003e 8,\n        ],\n    ],\n]);\necho $this-\u003eForm-\u003econtrol('title');\necho $this-\u003eForm-\u003econtrol('published', ['type' =\u003e 'checkbox']);\necho $this-\u003eForm-\u003ebutton('Submit');\necho $this-\u003eForm-\u003eend();\n```\n\nIt will render this HTML:\n\n```html\n\u003cform method=\"post\" accept-charset=\"utf-8\" action=\"/articles/add\"\u003e\n    \u003c!-- ... --\u003e\n    \u003cdiv class=\"mb-3 row text\"\u003e\n        \u003clabel class=\"col-form-label col-sm-6 col-md-4\" for=\"title\"\u003eTitle\u003c/label\u003e\n        \u003cdiv class=\"col-sm-6 col-md-8\"\u003e\n            \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3 row checkbox\"\u003e\n        \u003cdiv class=\"offset-sm-6 offset-md-4 col-sm-6 col-md-8\"\u003e\n            \u003cdiv class=\"form-check\"\u003e\n                \u003cinput type=\"hidden\" name=\"published\" value=\"0\"/\u003e\n                \u003cinput type=\"checkbox\" name=\"published\" value=\"1\" id=\"published\" class=\"form-check-input\"/\u003e\n                \u003clabel class=\"form-check-label\" for=\"published\"\u003ePublished\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- ... --\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-secondary\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nThe default alignment will use the `md` screen-size/breakpoint and the following column sizes:\n\n```php\n[\n    FormHelper::GRID_COLUMN_ONE =\u003e 2,\n    FormHelper::GRID_COLUMN_TWO =\u003e 10,\n]\n```\n\n### Inline forms\n\nInline forms will render controls on one and the same row, and hide labels for most controls.\n\n```php\necho $this-\u003eForm-\u003ecreate($article, [\n    'align' =\u003e 'inline',\n]);\necho $this-\u003eForm-\u003econtrol('title', ['placeholder' =\u003e 'Title']);\necho $this-\u003eForm-\u003econtrol('published', ['type' =\u003e 'checkbox']);\necho $this-\u003eHtml-\u003ediv('col-auto', $this-\u003eForm-\u003ebutton('Submit'));\necho $this-\u003eForm-\u003eend();\n```\n\nwill render this HTML:\n\n```html\n\u003cform method=\"post\" accept-charset=\"utf-8\" action=\"/articles/add\"\u003e\n    \u003c!-- ... --\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n        \u003cdiv class=\"text\"\u003e\n            \u003clabel class=\"form-label visually-hidden\" for=\"title\"\u003eTitle\u003c/label\u003e\n            \u003cinput type=\"text\" name=\"title\" placeholder=\"Title\" id=\"title\" class=\"form-control\"/\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n        \u003cdiv class=\"form-check checkbox\"\u003e\n            \u003cinput type=\"hidden\" name=\"published\" value=\"0\"/\u003e\n            \u003cinput type=\"checkbox\" name=\"published\" value=\"1\" id=\"published\" class=\"form-check-input\"\u003e\n            \u003clabel class=\"form-check-label\" for=\"published\"\u003ePublished\u003c/label\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- ... --\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-secondary\"\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### Spacing\n\nOut of the box BootstrapUI applies some default spacing for form controls. For default and horizontal aligned forms,\nthe `mb-3` [spacing class](https://getbootstrap.com/docs/5.3/utilities/spacing/) is being applied to all controls,\nwhile inline forms are using the `g-3` [gutter class](https://getbootstrap.com/docs/5.3/layout/gutters/).\n\nThis can be changed using the `spacing` option, it applies on a per-helper and per-form basis for all alignments, and\nfor default/horizontal alignments it also applies on a per-control basis.\n\n```php\n// for all forms\necho $this-\u003eForm-\u003esetConfig([\n    'spacing' =\u003e 'mb-6',\n]);\n```\n\n```php\n// for a specific form\necho $this-\u003eForm-\u003ecreate($entity, [\n    'spacing' =\u003e 'mb-6',\n]);\n```\n\n```php\n// for a specific control (default/horizontal aligned forms only)\necho $this-\u003eForm-\u003econtrol('title', [\n    'spacing' =\u003e 'mb-6',\n]);\n```\n\nTo completely disable this behavior, set the `spacing` option to `false`.\n\n### Supported controls\n\nBootstrapUI supports and generates Bootstrap compatible markup for all of CakePHP's default controls. Additionally it\nexplicitly supports Bootstrap specific markup for the following controls:\n\n- `color`\n- `range`\n- `switch`\n\n### Container attributes\n\nAttributes of the outer control container can be changed via the `container` option, cutting the need to use custom\ntemplates for simple changes. The `class` attribute is a special case, its value will be prepended to the existing\nlist of classes instead of replacing it.\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'container' =\u003e [\n        'class' =\u003e 'my-title-control',\n        'data-meta' =\u003e 'meta information',\n    ],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv data-meta=\"meta information\" class=\"my-title-control mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"title\"\u003eTitle\u003c/label\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"\u003e\n\u003c/div\u003e\n```\n\n### Appending/Prepending content\n\nAppending/Prepending content to input groups is supported via the `append` and `prepend` options respectively.\n\n```php\necho $this-\u003eForm-\u003econtrol('email', [\n    'prepend' =\u003e '@',\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 email\"\u003e\n    \u003clabel class=\"form-label\" for=\"email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"input-group\"\u003e\n        \u003cspan class=\"input-group-text\"\u003e@\u003c/span\u003e\n        \u003cinput type=\"email\" name=\"email\" id=\"email\" class=\"form-control\"/\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Multiple addons\n\nMultiple addons can be defined as an array for the `append` and `prepend` options:\n\n```php\necho $this-\u003eForm-\u003econtrol('amount', [\n    'prepend' =\u003e ['$', '0.00'],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"amount\"\u003eAmount\u003c/label\u003e\n    \u003cdiv class=\"input-group\"\u003e\n        \u003cspan class=\"input-group-text\"\u003e$\u003c/span\u003e\n        \u003cspan class=\"input-group-text\"\u003e0.00\u003c/span\u003e\n        \u003cinput type=\"text\" name=\"amount\" id=\"amount\" class=\"form-control\"/\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Addon options\n\nAddons support options that apply to the input group container. They can be defined by passing an array for the `append`\nand `prepend` options, and adding an array with options as the last entry.\n\nOptions can contain HTML attributes as know from control options, as well as the special `size` option, which\nautomatically translates to the corresponding input group size class.\n\n```php\necho $this-\u003eForm-\u003econtrol('amount', [\n    'prepend' =\u003e [\n        '$',\n        '0.00',\n        [\n            'size' =\u003e 'lg',\n            'class' =\u003e 'custom',\n            'custom' =\u003e 'attribute',\n        ],\n    ],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"amount\"\u003eAmount\u003c/label\u003e\n    \u003cdiv class=\"input-group input-group-lg custom\" custom=\"attribute\"\u003e\n        \u003cspan class=\"input-group-text\"\u003e$\u003c/span\u003e\n        \u003cspan class=\"input-group-text\"\u003e0.00\u003c/span\u003e\n        \u003cinput type=\"text\" name=\"amount\" id=\"amount\" class=\"form-control\"/\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Inline checkboxes and radio buttons\n\n[Inline checkboxes/switches and radio buttons](https://getbootstrap.com/docs/5.3/components/forms/#inline) (not to be\nconfused with inline aligned forms), can be created by setting the `inline` option to `true`.\n\nInlined checkboxes/switches and radio buttons will be rendered on the same horizontal row. When using horizontal form\nalignment however, only multi-checkboxes will render on the same row!\n\n```php\necho $this-\u003eForm-\u003econtrol('option_1', [\n    'type' =\u003e 'checkbox',\n    'inline' =\u003e true,\n]);\necho $this-\u003eForm-\u003econtrol('option_2', [\n    'type' =\u003e 'checkbox',\n    'inline' =\u003e true,\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 form-check form-check-inline checkbox\"\u003e\n    \u003cinput type=\"hidden\" name=\"option-1\" value=\"0\"/\u003e\n    \u003cinput type=\"checkbox\" name=\"option-1\" value=\"1\" id=\"option-1\" class=\"form-check-input\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"option-1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"mb-3 form-check form-check-inline checkbox\"\u003e\n    \u003cinput type=\"hidden\" name=\"option-2\" value=\"0\"/\u003e\n    \u003cinput type=\"checkbox\" name=\"option-2\" value=\"2\" id=\"option-2\" class=\"form-check-input\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"option-2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Switches\n\n[Switch style checkboxes](https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches) can be created by setting the\n`switch` option to `true`.\n\n```php\necho $this-\u003eForm-\u003econtrol('option', [\n    'type' =\u003e 'checkbox',\n    'switch' =\u003e true,\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 form-check form-switch checkbox\"\u003e\n    \u003cinput type=\"hidden\" name=\"option\" value=\"0\"/\u003e\n    \u003cinput type=\"checkbox\" name=\"option\" value=\"1\" id=\"option\" class=\"form-check-input\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"option\"\u003eOption\u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Floating labels\n\n[Floating labels](https://getbootstrap.com/docs/5.3/forms/floating-labels) are supported for `text`, `textarea`, and\n(non-`multiple`) `select` controls. They can be enabled via the label's `floating` option:\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'label' =\u003e [\n        'floating' =\u003e true,\n    ],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 form-floating text\"\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"/\u003e\n    \u003clabel for=\"title\"\u003eTitle\u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Help text\n\nBootstrap's [form help text](https://getbootstrap.com/docs/5.3/components/forms/#help-text) is supported via the\n`help` option.\n\nThe help text is by default being rendered in between of the control and the validation feedback.\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'help' =\u003e 'Help text',\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"title\"\u003eTitle\u003c/label\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\" aria-describedby=\"title-help\"/\u003e\n    \u003csmall id=\"title-help\" class=\"d-block form-text text-muted\"\u003eHelp text\u003c/small\u003e\n\u003c/div\u003e\n```\n\nAttributes can be configured by passing an array for the `help` option, where the text is then defined in the `content`\nkey:\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'help' =\u003e [\n        'id' =\u003e 'custom-help',\n        'class' =\u003e 'custom',\n        'data-custom' =\u003e 'attribute',\n        'content' =\u003e 'Help text',\n    ],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"title\"\u003eTitle\u003c/label\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\" aria-describedby=\"custom-help\"/\u003e\n    \u003csmall id=\"custom-help\" class=\"custom d-block form-text text-muted\" data-custom=\"attribute\"\u003eHelp text\u003c/small\u003e\n\u003c/div\u003e\n```\n\n### Tooltips\n\n[Bootstrap tooltips](https://getbootstrap.com/docs/5.3/components/tooltips/) can be added to labels via the `tooltip`\noption. The tooltip toggles are by default being rendered as a [Bootstrap icon](https://icons.getbootstrap.com/), which\nis being included by default when installing the assets via the `install` command.\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'tooltip' =\u003e 'Tooltip text',\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 text\"\u003e\n    \u003clabel class=\"form-label\" for=\"title\"\u003e\n        Title \u003cspan data-bs-toggle=\"tooltip\" title=\"Tooltip text\" class=\"bi bi-info-circle-fill\"\u003e\u003c/span\u003e\n    \u003c/label\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"/\u003e\n\u003c/div\u003e\n```\n\nIf you want to use a different toggle, being it a different Boostrap icon, or maybe a completely different icon\nfont/library, then you can do this by\n[overriding the `tooltip` template](https://book.cakephp.org/5/en/views/helpers/form.html#customizing-the-templates-formhelper-uses)\naccordingly, being it globally, per form, or per control:\n\n```php\necho $this-\u003eForm-\u003econtrol('title', [\n    'tooltip' =\u003e 'Tooltip text',\n    'templates' =\u003e [\n        'tooltip' =\u003e '\u003cspan data-bs-toggle=\"tooltip\" title=\"{{content}}\" class=\"material-icons\"\u003einfo\u003c/span\u003e',\n    ],\n]);\n```\n\n### Error feedback style\n\nBootstrapUI supports two styles of error feedback, the\n[regular Bootstrap text feedback](https://getbootstrap.com/docs/5.3/components/forms/#validation), and\n[Bootstrap tooltip feedback](https://getbootstrap.com/docs/5.3/components/forms/#tooltips) (not to be confused with\nlabel tooltips that are configured via the `tooltip` option!).\n\nThe style can be configured via the `feedbackStyle` option, either globally, per form, or per control. The supported\nstyles are:\n\n- `\\BootstrapUI\\View\\Helper\\FormHelper::FEEDBACK_STYLE_DEFAULT` Render error feedback as regular Bootstrap text\n feedback.\n- `\\BootstrapUI\\View\\Helper\\FormHelper::FEEDBACK_STYLE_TOOLTIP` Render error feedback as Bootstrap tooltip feedback\n (inline forms are using this style by default).\n\nNote that using the tooltip error style requires the form group elements to be non-static positioned! The form helper\nwill automatically add Bootstraps [position utility class](https://getbootstrap.com/docs/5.3/utilities/position/)\n`position-relative` to the form group elements when the tooltip error style is enabled.\n\nIf you need different positioning, use either CSS to override the `position` rule on the `.form-group` elements, or use\nthe `formGroupPosition` option to set your desired position, either globally, per form, or per control. The option\nsupports the following values:\n\n- `\\BootstrapUI\\View\\Helper\\FormHelper::POSITION_ABSOLUTE`\n- `\\BootstrapUI\\View\\Helper\\FormHelper::POSITION_FIXED`\n- `\\BootstrapUI\\View\\Helper\\FormHelper::POSITION_RELATIVE`\n- `\\BootstrapUI\\View\\Helper\\FormHelper::POSITION_STATIC`\n- `\\BootstrapUI\\View\\Helper\\FormHelper::POSITION_STICKY`\n\n```php\n$this-\u003eForm-\u003esetConfig([\n    'feedbackStyle' =\u003e \\BootstrapUI\\View\\Helper\\FormHelper::FEEDBACK_STYLE_TOOLTIP,\n    'formGroupPosition' =\u003e \\BootstrapUI\\View\\Helper\\FormHelper::POSITION_ABSOLUTE,\n]);\n\n// ...\n\necho $this-\u003eForm-\u003econtrol('title');\n```\n\nWith an error on the `title` field, this would generate the following HTML:\n\n```html\n\u003cdiv class=\"mb-3 position-absolute text is-invalid\"\u003e\n    \u003clabel class=\"form-label\" for=\"title\"\u003eTitle\u003c/label\u003e\n    \u003cinput type=\"text\" name=\"title\" id=\"title\" class=\"is-invalid form-control\"/\u003e\n    \u003cdiv class=\"invalid-tooltip\"\u003eError message\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Flash Messages / Alerts\n\nYou can set Flash Messages using the default Flash component syntax. Supported types are `success`, `info`, `warning`,\n`error`.\n\n```php\n$this-\u003eFlash-\u003esuccess('Your Success Message.');\n```\n\n#### Alert styles\n\nIf you need to set other Bootstrap Alert styles you can do this with:\n\n```php\n$this-\u003eFlash-\u003eset('Your Dark Message.', ['params' =\u003e ['class' =\u003e 'dark']]);\n```\n\nSupported styles are `primary`, `secondary`, `light`, `dark`.\n\n#### Icons\n\nBy default alerts use Bootstrap icons depending on the alert type. The mapped types are `default`, `info`, `warning`,\n`error`, and `success`. You can disable/customize icons via the `icon` option/parameter, either globally for the flash\nhelper, or individually for a single message.\n\nMessage without icon:\n\n```php\n$this-\u003eFlash-\u003esuccess('Message without icon.', [\n    'params' =\u003e [\n        'icon' =\u003e false,\n    ],\n]);\n```\n\nUse a custom icon:\n\n```php\n$this-\u003eFlash-\u003esuccess('Message with custom icon.', [\n    'params' =\u003e [\n        'icon' =\u003e 'mic-mute-fill',\n    ],\n]);\n```\n\nPass icon options (the icon name is optional here, when omitted, the default icon map will be looked up):\n\n```php\n$this-\u003eFlash-\u003esuccess('Message with custom icon options.', [\n    'params' =\u003e [\n        'icon' =\u003e [\n            'name' =\u003e 'mic-mute-fill',\n            'size' =\u003e '2xl',\n            'class' =\u003e 'foo bar me-2',\n            'data-custom' =\u003e 'attribute',\n        ],\n    ],\n]);\n```\n\n```html\n\u003ci class=\"foo bar me-2 bi bi-mic-mute-fill bi-2xl\" data-custom=\"attribute\"\u003e\u003c/i\u003e\n```\n\nUse custom HTML:\n\n```php\n$this-\u003eFlash-\u003esuccess('Message with custom icon HTML.', [\n    'params' =\u003e [\n        'icon' =\u003e '\u003cspan class=\"material-icons\"\u003evolume_off\u003c/span\u003e',\n    ],\n]);\n```\n\nDisable icons for all flash messages:\n\n```php\n$this-\u003eloadHelper('Flash', [\n    'className' =\u003e 'BootstrapUI.Flash',\n    'icon' =\u003e false,\n]);\n```\n\nSet icon options for all flash messages (the default icon map will be used, and the options will be applied to all\nicons):\n\n```php\n$this-\u003eloadHelper('Flash', [\n    'className' =\u003e 'BootstrapUI.Flash',\n    'icon' =\u003e [\n        'size' =\u003e '2xl',\n        'class' =\u003e 'foo bar me-2',\n        'data-custom' =\u003e 'attribute',\n    ],\n]);\n```\n\nDefine a custom icon map:\n\n```php\n$this-\u003eloadHelper('Flash', [\n    'className' =\u003e 'BootstrapUI.Flash',\n    'iconMap' =\u003e [\n        'default' =\u003e 'info-circle-fill',\n        'success' =\u003e 'check-circle-fill',\n        'error' =\u003e 'exclamation-triangle-fill',\n        'info' =\u003e 'info-circle-fill',\n        'warning' =\u003e 'exclamation-triangle-fill',\n    ],\n]);\n```\n\nUse a different icon set:\n\n```php\n$this-\u003eFlash-\u003esuccess('Message with different icon set.', [\n    'params' =\u003e [\n        'icon' =\u003e [\n            'namespace' =\u003e 'fas',\n            'prefix' =\u003e 'fa',\n            'name' =\u003e 'microphone-slash',\n            'size' =\u003e '2xl',\n        ],\n    ],\n]);\n```\n\n```html\n\u003ci class=\"me-2 fas fa-microphone-slash fa-2xl\"\u003e\u003c/i\u003e\n```\n\nUse a different icon set for all flash messages:\n\n```php\n$this-\u003eloadHelper('Html', [\n    'className' =\u003e 'BootstrapUI.Html',\n    'iconDefaults' =\u003e [\n        'namespace' =\u003e 'fas',\n        'prefix' =\u003e 'fa',\n    ],\n]);\n```\n\n```php\n$this-\u003eloadHelper('Flash', [\n    'className' =\u003e 'BootstrapUI.Flash',\n    'iconMap' =\u003e [\n        'default' =\u003e 'info-circle',\n        'success' =\u003e 'check-circle',\n        'error' =\u003e 'exclamation-triangle',\n        'info' =\u003e 'info-circle',\n        'warning' =\u003e 'exclamation-triangle',\n    ],\n]);\n```\n\n### Badges\n\nBy default badges will render as `secondary` theme styled:\n\n```php\necho $this-\u003eHtml-\u003ebadge('Text');\n```\n\n```html\n\u003cspan class=\"badge bg-secondary\"\u003eText\u003c/span\u003e\n```\n\n#### Background colors\n\n[Background colors](https://getbootstrap.com/docs/5.3/components/badge/#background-colors) can be changed by specifying\none of the Bootstrap theme color names via the `class` option, the helper will make sure that the correct prefixes\nare being applied:\n\n```php\necho $this-\u003eHtml-\u003ebadge('Text', [\n    'class' =\u003e 'danger',\n]);\n```\n\n```html\n\u003cspan class=\"badge bg-danger\"\u003eText\u003c/span\u003e\n```\n\n#### Using a different HTML tag\n\nBy default badges are using the `\u003cspan\u003e` tag. This can be changed via the `tag` option:\n\n```php\necho $this-\u003eHtml-\u003ebadge('Text', [\n    'tag' =\u003e 'div',\n]);\n```\n\n```html\n\u003cdiv class=\"badge bg-secondary\"\u003eText\u003c/div\u003e\n```\n\n### Icons\n\nBy default the HTML helper is configured to use [Bootstrap icons](https://icons.getbootstrap.com/).\n\n```php\necho $this-\u003eHtml-\u003eicon('mic-mute-fill');\n```\n\n```html\n\u003ci class=\"bi bi-mic-mute-fill\"\u003e\u003c/i\u003e\n```\n\n#### Sizes\n\nSizes can be specified via the `size` option, the passed value will automatically be prefixed:\n\n```php\necho $this-\u003eHtml-\u003eicon('mic-mute-fill', [\n    'size' =\u003e '2xl',\n]);\n```\n\n```html\n\u003ci class=\"bi bi-mic-mute-fill bi-2xl\"\u003e\u003c/i\u003e\n```\n\nThis plugin ships Bootstrap icon classes for the following sizes that center-align the icon vertically: `2xs`, `xs`,\n`sm`, `lg`, `xl`, and `2xl`, and the following ones that align the icons on the baseline: `1x`, `2x`, `3x`, `4x`, `5x`,\n`6x`, `7x`, `8x`, `9x`, and `10x`.\n\n#### Using a different icon set\n\nYou can use a different icon set by configuring the `namespace` and `prefix `options, either per `icon()` call:\n\n```php\necho $this-\u003eHtml-\u003eicon('microphone-slash', [\n    'namespace' =\u003e 'fas',\n    'prefix' =\u003e 'fa',\n]);\n```\n\nor globally for all usages of `HtmlHelper::icon()` by configuring the HTML helper defaults:\n\n```php\n$this-\u003eloadHelper('Html', [\n    'className' =\u003e 'BootstrapUI.Html',\n    'iconDefaults' =\u003e [\n        'namespace' =\u003e 'fas',\n        'prefix' =\u003e 'fa',\n    ],\n]);\n```\n\n### Breadcrumbs\n\nThe breadcrumbs helper is a drop-in replacement, no additional configuration is available/required.\n\n```php\necho $this-\u003eBreadcrumbs\n    -\u003eadd('Home', '/')\n    -\u003eadd('Articles', '/articles')\n    -\u003eadd('View')\n    -\u003erender();\n```\n\n```html\n\u003cnav aria-label=\"breadcrumb\"\u003e\n    \u003col class=\"breadcrumb\"\u003e\n        \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli class=\"breadcrumb-item active\"\u003e\u003ca href=\"/articles\" aria-current=\"page\"\u003eArticles\u003c/a\u003e\u003c/li\u003e\n        \u003cli class=\"breadcrumb-item\"\u003e\u003cspan\u003eView\u003c/span\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n\u003c/nav\u003e\n```\n\n### Pagination\n\nThe paginator helper generates bootstrap compatible/styles markup when using the helper's standard methods, and also\nincludes a convenience method that can generate a full set of pagination controls, that is first/previous/next/last as\nwell as page number links, all enclosed in a list wrapper.\n\n```php\necho $this-\u003ePaginator-\u003efirst();\necho $this-\u003ePaginator-\u003eprev();\necho $this-\u003ePaginator-\u003enumbers();\necho $this-\u003ePaginator-\u003enext();\necho $this-\u003ePaginator-\u003elast();\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cli class=\"page-item first\"\u003e\n    \u003ca class=\"page-link\" aria-label=\"First\" href=\"/articles/index\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e«\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" rel=\"prev\" aria-label=\"Previous\" href=\"/articles/index\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e‹\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" href=\"/articles/index\"\u003e1\u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item active\" aria-current=\"page\"\u003e\n    \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" href=\"/articles/index?page=3\"\u003e3\u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" rel=\"next\" aria-label=\"Next\" href=\"/articles/index?page=3\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e›\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item last\"\u003e\n    \u003ca class=\"page-link\" aria-label=\"Last\" href=\"/articles/index?page=3\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e»\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n```\n\n#### Configuring the ARIA labels\n\nWhen using the standard methods you can use the `label` option to pass a custom string to use for\n[the `aria-label` attribute](https://getbootstrap.com/docs/5.3/components/pagination/#working-with-icons):\n\n```php\necho $this-\u003ePaginator-\u003efirst('«', ['label' =\u003e __('Beginning')]);\necho $this-\u003ePaginator-\u003eprev('‹', ['label' =\u003e __('Back')]);\necho $this-\u003ePaginator-\u003enext('›', ['label' =\u003e __('Forward')]);\necho $this-\u003ePaginator-\u003elast('»', ['label' =\u003e __('End')]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cli class=\"page-item first\"\u003e\n    \u003ca class=\"page-link\" aria-label=\"Beginning\" href=\"/articles/index\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e«\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" rel=\"prev\" aria-label=\"Back\" href=\"/articles/index\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e‹\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item\"\u003e\n    \u003ca class=\"page-link\" rel=\"next\" aria-label=\"Forward\" href=\"/articles/index?page=3\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e›\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n\u003cli class=\"page-item last\"\u003e\n    \u003ca class=\"page-link\" aria-label=\"End\" href=\"/articles/index?page=3\"\u003e\n        \u003cspan aria-hidden=\"true\"\u003e»\u003c/span\u003e\n    \u003c/a\u003e\n\u003c/li\u003e\n```\n\n#### Generating a full set of controls\n\nA full set of pagination controls, that is first/previous/next/last as well as page number links, all enclosed in a list\nwrapper, can be generated using the `links()` method.\n\nBy default it renders numbers only:\n\n```php\necho $this-\u003ePaginator-\u003elinks();\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/articles/index\"\u003e1\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item active\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/articles/index?page=3\"\u003e3\u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n##### Configuring controls\n\nThe generated controls can be configured via the `first`, `prev`, `next`, and `last` options, which each can take either\nboolean `true` to generate the control with the helper defaults, a string that is used as the control's text, or an\narray that allows specifying the link text as well as the ARIA label.\n\nThe generated controls can be configured via the `first`, `prev`, `next`, and `last` options, which each take either\nboolean `true` to indicate that the control should be generated using the helper defaults, a string that is used as the\ncontrol's text, or an array with `label` and `text` options that determine the ARIA label value and the link text:\n\n```php\necho $this-\u003ePaginator-\u003elinks([\n    'first' =\u003e '❮❮',\n    'prev' =\u003e true,\n    'next' =\u003e true,\n    'last' =\u003e [\n        'label' =\u003e 'End',\n        'text' =\u003e '❯❯',\n    ],\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"page-item first\"\u003e\n        \u003ca class=\"page-link\" aria-label=\"First\" href=\"/articles/index\"\u003e\n            \u003cspan aria-hidden=\"true\"\u003e❮❮\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" rel=\"prev\" aria-label=\"Previous\" href=\"/articles/index\"\u003e\n            \u003cspan aria-hidden=\"true\"\u003e‹\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/articles/index\"\u003e1\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item active\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/articles/index?page=3\"\u003e3\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" rel=\"next\" aria-label=\"Next\" href=\"/articles/index?page=3\"\u003e\n            \u003cspan aria-hidden=\"true\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page-item last\"\u003e\n        \u003ca class=\"page-link\" aria-label=\"End\" href=\"/articles/index?page=3\"\u003e\n            \u003cspan aria-hidden=\"true\"\u003e❯❯\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n##### Sizing\n\n[The size](https://getbootstrap.com/docs/5.3/components/pagination/#sizing) can be specified via the `size` option:\n\n```php\necho $this-\u003ePaginator-\u003elinks([\n    'size' =\u003e 'lg',\n]);\n```\n\nThis would generate the following HTML:\n\n```html\n\u003cul class=\"pagination pagination-lg\"\u003e\n    \u003c!-- ... --\u003e\n\u003c/ul\u003e\n```\n\n### Helper configuration\n\nYou can configure each of the helpers by passing in extra parameters when loading them in your `AppView.php`.\n\nHere is an example of changing the `prev` and `next` labels for the Paginator helper.\n\n```php\n$this-\u003eloadHelper('Paginator', [\n    'className' =\u003e 'BootstrapUI.Paginator',\n    'labels' =\u003e [\n        'prev' =\u003e 'previous',\n        'next' =\u003e 'next',\n    ],\n]);\n```\n\n## Contributing\n\n### Patches \u0026 Features\n\n* Fork\n* Mod, fix\n* Test - this is important, so it's not unintentionally broken\n* Commit - do not mess with license, todo, version, etc. (if you do change any, put them into separate commits that can\n  be ignored when pulling)\n* Pull request - bonus point for topic branches\n\nTo ensure your PRs are considered for upstream, you MUST follow the CakePHP coding standards. A `pre-commit`\nhook has been included to automatically run the code sniffs for you. From your project's root directory:\n\n```\ncp ./contrib/pre-commit .git/hooks/\nchmod 755 .git/hooks/pre-commit\n```\n\n### Testing\n\nWhen working on the plugin's code you can run the tests for BootstrapUI by doing the following:\n\n```\ncomposer install\n./vendor/bin/phpunit\n```\n\n### Bugs \u0026 Feedback\n\nhttps://github.com/friendsofcake/bootstrap-ui/issues\n\n\n[cakephp]:https://cakephp.org/\n[composer]:https://getcomposer.org/\n[composer:ignore]:https://getcomposer.org/doc/faqs/should-i-commit-the-dependencies-in-my-vendor-directory.md\n[bs]:https://getbootstrap.com/\n[npm]:https://www.npmjs.com/\n","funding_links":[],"categories":["Templating"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofcake%2Fbootstrap-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofcake%2Fbootstrap-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofcake%2Fbootstrap-ui/lists"}