@@ -22,10 +22,9 @@ For version info see [version map](https://github.com/FriendsOfCake/bootstrap-ui
2222## Requirements
2323
2424* CakePHP 5.x
25- * Bootstrap 5.x
25+ * Bootstrap 5.3. x
2626* npm 6.x
27- * Popper.js 2.x
28- * Bootstrap Icons 1.5.x
27+ * Bootstrap Icons 1.11.x
2928
3029## What's included?
3130
@@ -72,7 +71,7 @@ You can either use the Bootstrap commands to make the necessary changes, or do t
7271
7372### Using the Bootstrap commands
7473
75- 1 . To install the Bootstrap assets (Bootstrap's CSS/JS files, Popper.js ) via npm you can use the ` install `
74+ 1 . To install the Bootstrap assets (Bootstrap's CSS/JS files) via npm you can use the ` install `
7675 command, or [ install them manually] ( #installing-bootstrap-assets-via-npm ) :
7776
7877 ```
@@ -119,16 +118,14 @@ do manually if you wish to control which assets are being included, and where th
119118Assuming you are in your application's root:
120119
121120```
122- npm install @popperjs/core@2 bootstrap@5 bootstrap-icons@1
121+ npm install bootstrap@5 bootstrap-icons@1
123122mkdir -p webroot/css
124123mkdir -p webroot/font/fonts
125124mkdir -p webroot/js
126- cp node_modules/@popperjs/core/dist/umd/popper.js webroot/js
127- cp node_modules/@popperjs/core/dist/umd/popper.min.js webroot/js
128125cp node_modules/bootstrap/dist/css/bootstrap.css webroot/css/
129126cp node_modules/bootstrap/dist/css/bootstrap.min.css webroot/css/
130- cp node_modules/bootstrap/dist/js/bootstrap.js webroot/js/
131- cp node_modules/bootstrap/dist/js/bootstrap.min.js webroot/js/
127+ cp node_modules/bootstrap/dist/js/bootstrap.bundle. js webroot/js/
128+ cp node_modules/bootstrap/dist/js/bootstrap.bundle. min.js webroot/js/
132129cp node_modules/bootstrap-icons/font/bootstrap-icons.css webroot/font/
133130cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff webroot/font/fonts/
134131cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2 webroot/font/fonts/
@@ -245,7 +242,7 @@ them using the standard plugin syntax:
245242// in the <head >
246243echo $this->Html->css('BootstrapUI.bootstrap.min');
247244echo $this->Html->css(['BootstrapUI./font/bootstrap-icons', 'BootstrapUI./font/bootstrap-icon-sizes']);
248- echo $this->Html->script(['BootstrapUI.popper.min', 'BootstrapUI. bootstrap.min']);
245+ echo $this->Html->script(['BootstrapUI.bootstrap.bundle .min']);
249246```
250247
251248If you have installed the assets manually, you'll need to use paths accordingly. With
@@ -254,15 +251,15 @@ If you have installed the assets manually, you'll need to use paths accordingly.
254251``` php
255252echo $this->Html->css('bootstrap.min');
256253echo $this->Html->css(['/font/bootstrap-icons', '/font/bootstrap-icon-sizes']);
257- echo $this->Html->script(['popper.min', ' bootstrap.min']);
254+ echo $this->Html->script(['bootstrap.bundle .min']);
258255```
259256
260257If you're using paths that don't adhere to the CakePHP conventions, you'll have to explicitly specify them:
261258
262259``` php
263260echo $this->Html->css('/path/to/bootstrap.css');
264261echo $this->Html->css(['/path/to/bootstrap-icons.css', '/path/to/bootstrap-icon-sizes.css']);
265- echo $this->Html->script(['/path/to/popper.js', '/path/to/ bootstrap.js']);
262+ echo $this->Html->script(['/path/to/bootstrap.bundle .js']);
266263```
267264
268265## Bake templates
@@ -343,7 +340,7 @@ Horizontal forms automatically render labels and controls in separate columns (w
343340one, and controls in the second one.
344341
345342Alignment can be configured via the ` align ` option, which takes either a list of column sizes for the ` md `
346- [ Bootstrap screen-size/breakpoint] ( https://getbootstrap.com/docs/5.0 /layout/breakpoints/ ) , or a matrix of
343+ [ Bootstrap screen-size/breakpoint] ( https://getbootstrap.com/docs/5.3 /layout/breakpoints/ ) , or a matrix of
347344screen-size/breakpoint names and column sizes.
348345
349346The following will use the default ` md ` screen-size/breakpoint:
@@ -477,8 +474,8 @@ will render this HTML:
477474### Spacing
478475
479476Out of the box BootstrapUI applies some default spacing for form controls. For default and horizontal aligned forms,
480- the ` mb-3 ` [ spacing class] ( https://getbootstrap.com/docs/5.0 /utilities/spacing/ ) is being applied to all controls,
481- while inline forms are using the ` g-3 ` [ gutter class] ( https://getbootstrap.com/docs/5.0 /layout/gutters/ ) .
477+ the ` mb-3 ` [ spacing class] ( https://getbootstrap.com/docs/5.3 /utilities/spacing/ ) is being applied to all controls,
478+ while inline forms are using the ` g-3 ` [ gutter class] ( https://getbootstrap.com/docs/5.3 /layout/gutters/ ) .
482479
483480This can be changed using the ` spacing ` option, it applies on a per-helper and per-form basis for all alignments, and
484481for default/horizontal alignments it also applies on a per-control basis.
@@ -655,7 +652,7 @@ This would generate the following HTML:
655652
656653### Switches
657654
658- [ Switch style checkboxes] ( https://getbootstrap.com/docs/5.0 /forms/checks-radios/#switches ) can be created by setting the
655+ [ Switch style checkboxes] ( https://getbootstrap.com/docs/5.3 /forms/checks-radios/#switches ) can be created by setting the
659656` switch ` option to ` true ` .
660657
661658``` php
@@ -677,7 +674,7 @@ This would generate the following HTML:
677674
678675### Floating labels
679676
680- [ Floating labels] ( https://getbootstrap.com/docs/5.0 /forms/floating-labels ) are supported for ` text ` , ` textarea ` , and
677+ [ Floating labels] ( https://getbootstrap.com/docs/5.3 /forms/floating-labels ) are supported for ` text ` , ` textarea ` , and
681678(non-` multiple ` ) ` select ` controls. They can be enabled via the label's ` floating ` option:
682679
683680``` php
@@ -746,7 +743,7 @@ This would generate the following HTML:
746743
747744### Tooltips
748745
749- [ Bootstrap tooltips] ( https://getbootstrap.com/docs/5.0 /components/tooltips/ ) can be added to labels via the ` tooltip `
746+ [ Bootstrap tooltips] ( https://getbootstrap.com/docs/5.3 /components/tooltips/ ) can be added to labels via the ` tooltip `
750747option. The tooltip toggles are by default being rendered as a [ Bootstrap icon] ( https://icons.getbootstrap.com/ ) , which
751748is being included by default when installing the assets via the ` install ` command.
752749
@@ -1001,7 +998,7 @@ echo $this->Html->badge('Text');
1001998
1002999#### Background colors
10031000
1004- [ Background colors] ( https://getbootstrap.com/docs/5.0 /components/badge/#background-colors ) can be changed by specifying
1001+ [ Background colors] ( https://getbootstrap.com/docs/5.3 /components/badge/#background-colors ) can be changed by specifying
10051002one of the Bootstrap theme color names via the ` class ` option, the helper will make sure that the correct prefixes
10061003are being applied:
10071004
@@ -1155,7 +1152,7 @@ This would generate the following HTML:
11551152#### Configuring the ARIA labels
11561153
11571154When using the standard methods you can use the ` label ` option to pass a custom string to use for
1158- [ the ` aria-label ` attribute] ( https://getbootstrap.com/docs/5.0 /components/pagination/#working-with-icons ) :
1155+ [ the ` aria-label ` attribute] ( https://getbootstrap.com/docs/5.3 /components/pagination/#working-with-icons ) :
11591156
11601157``` php
11611158echo $this->Paginator->first('«', ['label' => __('Beginning')]);
@@ -1276,7 +1273,7 @@ This would generate the following HTML:
12761273
12771274##### Sizing
12781275
1279- [ The size] ( https://getbootstrap.com/docs/5.0 /components/pagination/#sizing ) can be specified via the ` size ` option:
1276+ [ The size] ( https://getbootstrap.com/docs/5.3 /components/pagination/#sizing ) can be specified via the ` size ` option:
12801277
12811278``` php
12821279echo $this->Paginator->links([
0 commit comments