Download the PHP package friendsofcake/bootstrap-ui without Composer

Bootstrap UI

Transparently use Bootstrap 5 with CakePHP 5.

For version info see version map.

Requirements

• CakePHP 5.x
• Bootstrap 5.3.x
• npm 6.x
• Bootstrap Icons 1.11.x

What's included?

• FlashHelper (element types: error, info, success, warning)
• FormHelper (align: default, inline, horizontal)
• BreadcrumbsHelper
• HtmlHelper (components: badge, icon)
• PaginatorHelper
• Widgets (basic, button, datetime, file, select, textarea)
• Example layouts (cover, signin, dashboard)
• Bake templates

Table of contents

• Installation
• Setup
  • Using the Bootstrap commands
  • Manual setup
  • BootstrapUI layouts
  • Including the Bootstrap framework
• Bake templates
• Usage
• Contributing
• License

Installation

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

Then load the plugin using CakePHP's console:

Setup

You can either use the Bootstrap commands to make the necessary changes, or do them manually.

Using the Bootstrap commands

1. To install the Bootstrap assets (Bootstrap's CSS/JS files) via npm you can use the install command, or install them manually:

   This will fetch all assets, copy the distribution assets to the BootstrapUI plugin's webroot directory, and symlink (or copy) them to your application's webroot directory.

   If you want to install the latest minor versions of the assets instead of the exact pinned ones, you can use the --latest option:

2. You will need to modify your src/View/AppView class to either extend BootstrapUI\View\UIView or use the trait BootStrapUI\View\UIViewTrait. For doing this you can either use the modify_view command, or change your view manually:

   This will rewrite your src/View/AppView like described in AppView setup using UIView.

3. BootstrapUI ships with some example layouts. You can install them using the copy_layouts command, or copy them manually:

   This will copy the three example layouts cover.php, dashboard.php and signin.php to your application's src/templates/layout/TwitterBootstrap.

Manual setup

Installing Bootstrap assets via npm

The npm, which you can also do manually if you wish to control which assets are being included, and where they are placed.

Assuming you are in your application's root:

AppView setup using UIView

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 default.php layout for your app.

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

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.

Copying example layouts

In order to be able to use the BootstrapUI example layouts (directly taken from the Bootstrap examples), they need to be copied to your application's layouts directory, either by using the copy_layouts command, or by copying the files manually:

BootstrapUI layouts

BootstrapUI comes with its own default.php layout file and examples taken from the Bootstrap framework.

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

• Assign a layout to the template with $this->setLayout('layout').
• Disable auto loading of the layout in BootstrapUI\View\UIViewTrait by adding $this->initializeUI(['layout' => false]); to your AppView's initialize() function.

Using the example layouts

Once copied into your application's layouts directory (being it via manually), you can simply extend the example layouts in your views like so:

Available types are:

• cover
• signin
• dashboard

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

Including the Bootstrap framework

If you are using the BoostrapUI plugin's default layout, and you have installed the Bootstrap assets using the install command, the required assets should automatically be included.

If you wish to use your own layout template, then you need to take care of including the required CSS/JS files yourself.

If you have installed the assets using the install command, you can refer to them using the standard plugin syntax:

If you have installed the assets manually, you'll need to use paths accordingly. With the example copy commands you could use the standard short path syntax:

If you're using paths that don't adhere to the CakePHP conventions, you'll have to explicitly specify them:

Bake templates

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

Currently, bake templates for the following bake subcommands are included:

template

Additionally to the default index, add, edit, and view templates, a login template is available too. While the default CRUD action view templates can be utilized like this:

the login template has to be used explicitly by specifying the action name:

Usage

At the core of BootstrapUI is a collection of enhancements for CakePHP core helpers. Among other things, 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 forms

will render this HTML:

Horizontal forms

Horizontal forms automatically render labels and controls in separate columns (where applicable), labels in th first one, and controls in the second one.

Alignment can be configured via the align option, which takes either a list of column sizes for the md Bootstrap screen-size/breakpoint, or a matrix of screen-size/breakpoint names and column sizes.

The following will use the default md screen-size/breakpoint:

It will render this HTML:

The following uses a matrix of screen-sizes/breakpoints and column sizes:

It will render this HTML:

The default alignment will use the md screen-size/breakpoint and the following column sizes:

Inline forms

Inline forms will render controls on one and the same row, and hide labels for most controls.

will render this HTML:

Spacing

Out of the box BootstrapUI applies some default spacing for form controls. For default and horizontal aligned forms, the mb-3 spacing class is being applied to all controls, while inline forms are using the g-3 gutter class.

This can be changed using the spacing option, it applies on a per-helper and per-form basis for all alignments, and for default/horizontal alignments it also applies on a per-control basis.

To completely disable this behavior, set the spacing option to false.

Supported controls

BootstrapUI supports and generates Bootstrap compatible markup for all of CakePHP's default controls. Additionally it explicitly supports Bootstrap specific markup for the following controls:

• color
• range
• switch

Container attributes

Attributes of the outer control container can be changed via the container option, cutting the need to use custom templates for simple changes. The class attribute is a special case, its value will be prepended to the existing list of classes instead of replacing it.

This would generate the following HTML:

Appending/Prepending content

Appending/Prepending content to input groups is supported via the append and prepend options respectively.

This would generate the following HTML:

Multiple addons

Multiple addons can be defined as an array for the append and prepend options:

This would generate the following HTML:

Addon options

Addons support options that apply to the input group container. They can be defined by passing an array for the append and prepend options, and adding an array with options as the last entry.

Options can contain HTML attributes as know from control options, as well as the special size option, which automatically translates to the corresponding input group size class.

This would generate the following HTML:

Inline checkboxes and radio buttons

Inline checkboxes/switches and radio buttons (not to be confused with inline aligned forms), can be created by setting the inline option to true.

Inlined checkboxes/switches and radio buttons will be rendered on the same horizontal row. When using horizontal form alignment however, only multi-checkboxes will render on the same row!

This would generate the following HTML:

Switches

Switch style checkboxes can be created by setting the switch option to true.

This would generate the following HTML:

Floating labels

Floating labels are supported for text, textarea, and (non-multiple) select controls. They can be enabled via the label's floating option:

This would generate the following HTML:

Help text

Bootstrap's form help text is supported via the help option.

The help text is by default being rendered in between of the control and the validation feedback.

This would generate the following HTML:

Attributes can be configured by passing an array for the help option, where the text is then defined in the content key:

This would generate the following HTML:

Tooltips

Bootstrap tooltips can be added to labels via the tooltip option. The tooltip toggles are by default being rendered as a Bootstrap icon, which is being included by default when installing the assets via the install command.

This would generate the following HTML:

If you want to use a different toggle, being it a different Boostrap icon, or maybe a completely different icon font/library, then you can do this by overriding the tooltip template accordingly, being it globally, per form, or per control:

Error feedback style

BootstrapUI supports two styles of error feedback, the regular Bootstrap text feedback, and Bootstrap tooltip feedback (not to be confused with label tooltips that are configured via the tooltip option!).

The style can be configured via the feedbackStyle option, either globally, per form, or per control. The supported styles are:

• \BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_DEFAULT Render error feedback as regular Bootstrap text feedback.
• \BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_TOOLTIP Render error feedback as Bootstrap tooltip feedback (inline forms are using this style by default).

Note that using the tooltip error style requires the form group elements to be non-static positioned! The form helper will automatically add Bootstraps position utility class position-relative to the form group elements when the tooltip error style is enabled.

If you need different positioning, use either CSS to override the position rule on the .form-group elements, or use the formGroupPosition option to set your desired position, either globally, per form, or per control. The option supports the following values:

• \BootstrapUI\View\Helper\FormHelper::POSITION_ABSOLUTE
• \BootstrapUI\View\Helper\FormHelper::POSITION_FIXED
• \BootstrapUI\View\Helper\FormHelper::POSITION_RELATIVE
• \BootstrapUI\View\Helper\FormHelper::POSITION_STATIC
• \BootstrapUI\View\Helper\FormHelper::POSITION_STICKY

With an error on the title field, this would generate the following HTML:

Flash Messages / Alerts

You can set Flash Messages using the default Flash component syntax. Supported types are success, info, warning, error.

Alert styles

If you need to set other Bootstrap Alert styles you can do this with:

Supported styles are primary, secondary, light, dark.

Icons

By default alerts use Bootstrap icons depending on the alert type. The mapped types are default, info, warning, error, and success. You can disable/customize icons via the icon option/parameter, either globally for the flash helper, or individually for a single message.

Message without icon:

Use a custom icon:

Pass icon options (the icon name is optional here, when omitted, the default icon map will be looked up):

Use custom HTML:

Disable icons for all flash messages:

Set icon options for all flash messages (the default icon map will be used, and the options will be applied to all icons):

Define a custom icon map:

Use a different icon set:

Use a different icon set for all flash messages:

Badges

By default badges will render as secondary theme styled:

Background colors

Background colors can be changed by specifying one of the Bootstrap theme color names via the class option, the helper will make sure that the correct prefixes are being applied:

Using a different HTML tag

By default badges are using the <span> tag. This can be changed via the tag option:

Icons

By default the HTML helper is configured to use Bootstrap icons.

Sizes

Sizes can be specified via the size option, the passed value will automatically be prefixed:

This plugin ships Bootstrap icon classes for the following sizes that center-align the icon vertically: 2xs, xs, sm, lg, xl, and 2xl, and the following ones that align the icons on the baseline: 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, and 10x.

Using a different icon set

You can use a different icon set by configuring the namespace and prefixoptions, either per icon() call:

or globally for all usages of HtmlHelper::icon() by configuring the HTML helper defaults:

Breadcrumbs

The breadcrumbs helper is a drop-in replacement, no additional configuration is available/required.

Pagination

The paginator helper generates bootstrap compatible/styles markup when using the helper's standard methods, and also includes a convenience method that can generate a full set of pagination controls, that is first/previous/next/last as well as page number links, all enclosed in a list wrapper.

This would generate the following HTML:

Configuring the ARIA labels

When using the standard methods you can use the label option to pass a custom string to use for the aria-label attribute:

This would generate the following HTML:

Generating a full set of controls

A full set of pagination controls, that is first/previous/next/last as well as page number links, all enclosed in a list wrapper, can be generated using the links() method.

By default it renders numbers only:

This would generate the following HTML:

Configuring controls

The generated controls can be configured via the first, prev, next, and last options, which each can take either boolean true to generate the control with the helper defaults, a string that is used as the control's text, or an array that allows specifying the link text as well as the ARIA label.

The generated controls can be configured via the first, prev, next, and last options, which each take either boolean true to indicate that the control should be generated using the helper defaults, a string that is used as the control's text, or an array with label and text options that determine the ARIA label value and the link text:

This would generate the following HTML:

Sizing

The size can be specified via the size option:

This would generate the following HTML:

Helper configuration

You can configure each of the helpers by passing in extra parameters when loading them in your AppView.php.

Here is an example of changing the prev and next labels for the Paginator helper.

Contributing

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, put them into separate commits that can be ignored when pulling)
• 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:

Testing

When working on the plugin's code you can run the tests for BootstrapUI by doing the following:

Bugs & Feedback

https://github.com/friendsofcake/bootstrap-ui/issues