{"id":14965607,"url":"https://github.com/czubehead/bootstrap-4-forms","last_synced_at":"2025-10-25T12:30:18.253Z","repository":{"id":54196897,"uuid":"96904894","full_name":"czubehead/bootstrap-4-forms","owner":"czubehead","description":"Bootstrap 4 forms for Nette framework","archived":false,"fork":false,"pushed_at":"2019-03-28T14:00:35.000Z","size":316,"stargazers_count":10,"open_issues_count":9,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T07:05:34.578Z","etag":null,"topics":["bootstrap-form","bootstrap-form-builder","bootstrap4","composer-package","nette","nette-form","nette-framework","packagist"],"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/czubehead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-11T14:51:25.000Z","updated_at":"2023-06-04T17:06:21.000Z","dependencies_parsed_at":"2022-08-13T09:00:27.658Z","dependency_job_id":null,"html_url":"https://github.com/czubehead/bootstrap-4-forms","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/czubehead%2Fbootstrap-4-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/czubehead%2Fbootstrap-4-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/czubehead%2Fbootstrap-4-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/czubehead%2Fbootstrap-4-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/czubehead","download_url":"https://codeload.github.com/czubehead/bootstrap-4-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238137804,"owners_count":19422700,"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-form","bootstrap-form-builder","bootstrap4","composer-package","nette","nette-form","nette-framework","packagist"],"created_at":"2024-09-24T13:34:58.682Z","updated_at":"2025-10-25T12:30:17.815Z","avatar_url":"https://github.com/czubehead.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap 4 forms for Nette\n\n**Please use English in potential issues, let's keep it clean, shall we?**\n\nThis is a library that lets you use Bootstrap 4 forms in \n[Nette framework](http://nette.org). \n\nRather than being just a renderer, this introduces a custom set of controls \n(which covers all default controls) and a renderer.\n\nNote that **this is an alpha**, so it may be buggy. That is where you can \nhelp by reporting issues.\n\n[See example here](https://codepen.io/czubehead/pen/ZryJQd?editors=1000)\n\n## Features\n\n- [Bootstrap 4 forms](http://getbootstrap.com/docs/4.0/components/forms/) HTML generation\n- All layout modes: vertical, side-by-side and inline\n- TextInput placeholders\n- Highly configurable renderer\n- [Custom Bootstrap controls](http://getbootstrap.com/docs/4.0/components/forms/#custom-forms)\n- DateTime picker, variety of human readable date/time formats, placeholder example generation\n- [Validation styles](http://getbootstrap.com/docs/4.0/components/forms/#server-side)\n- Programmatically generated [Bootstrap grid](https://getbootstrap.com/docs/4.1/layout/grid/)\n- Assisted manual rendering\n \n## Installation\n\nThe best way is via composer:\n\n```cmd\ncomposer require czubehead/bootstrap-4-forms\n```\n\n*Note that if you simply clone the main branch from this repo, it is not guaranteed to work, use releases instead*\n\n### Requirements\n\n- Works with `Nette\\Application\\UI\\Form`, not `Nette\\Forms\\Form`, so you need the\n  whole Nette framework.\n- PHP 5.6+\n- Client-side bootstrap 4 stylesheets and JS (obviously)\n\n### Compatibility\n\nThis package is compatible with any version version of Bootstrap 4 \n(last tested on v4.0.0-beta.2)\n\n## How to use\n\n### Form\n\nProbably the main class you will be using is `Czubehead\\BootstrapForms\\BootstrapForm`.\nIt has all the features of this library pre-configured and extends \n`Nette\\Application\\UI\\Form` functionality by:\n - Only accepts `Czubehead\\BootstrapForms\\BootstrapRenderer` or its children (which is default)\n - Built-in AJAX support (adds `ajax` class upon rendering) via `ajax`(bool) property\n - Has direct access to render mode property of renderer (property `renderMode`)\n - All add* methods are overridden by bootstrap-enabled controls\n\n```php\n$form = new BootstrapForm;\n$form-\u003erenderMode = RenderMode::Vertical;\t\t\n```\n\nIt will behave pretty much the same as the default Nette form, with the exception of not grouping buttons. \nThat feature would only add unnecessary and deceiving overhead to this library,\n**use grid instead, it will give you much finer control**\n\n#### Render modes\n 1. **Vertical** (`Enums\\RenderMode::VerticalMode`) all controls are below their labels\n 2. **Side-by-side** (`Enums\\RenderMode::SideBySideMode`) controls have their labels\n on the left. It is made up using [Bootstrap grid](http://v4-alpha.getbootstrap.com/layout/grid/).\n The default layout is 3 columns for labels and 9 for controls. This can be altered\n using `BootstrapRenderer::setColumns($label, $input)`.\n 3. **Inline** `Enums\\RenderMode::Inline` all controls and labels will be in one\n enormous line\n\n### Controls / inputs\n\nEach default control has has been extended bootstrap-enabled controls and\nwill render itself correctly even without the renderer. You can distinguish\nthem easily - they all have `Input` suffix.\n\n#### TextInput\n\nTextInput can have placeholder set (`$input-\u003esetPlaceholder($val)`). All text-based\ninputs (except for TextArea) inherit from this control.\n\n#### DateTimeInput\n\nIts format can be set (`$input-\u003esetFormat($str)`), the default is d.m.yyyy h:mm\n(though you must specify it in standard PHP format!).\n\nYou may use DateTimeFormats class constants as a list of pretty much all formats:\n```php\nDateTimeFormat::D_DMY_DOTS_NO_LEAD . ' ' . DateTimeFormat::T_24_NO_LEAD\n```\nis the default format for DateTime. See its PhpDoc for further explanation.\n\n#### UploadInput\n\nNothing out of ordinary, but it **Needs `\u003chtml lang=\"xx\"\u003e` attribute** to work.\n\nHas property `buttonCaption`, which sets the text on the button on the left. \nThe right button is set by [Bootstrap CSS](http://getbootstrap.com/docs/4.0/components/forms/#file-browser), which depends `\u003chtml lang=\"xx\"\u003e`.\n\n#### SelectInput, MultiSelectInput\n\nThese can accept nested arrays of options.\n\n```php\n[\n    'sub' =\u003e [\n        1 =\u003e 'opt1',\n        2 =\u003e 'opt2'\n    ],\n    3     =\u003e 'opt3',\n]\n```\nwill generate\n```html\n\u003coptgroup label=\"sub\"\u003e\n    \u003coption value=\"1\"\u003eopt1\u003c/option\u003e\n    \u003coption value=\"2\"\u003eopt2\u003c/option\u003e\n\u003c/optgroup\u003e\n\u003coption value=\"3\"\u003eopt3\u003c/option\u003e\n```\n\n### Renderer\n\nThe renderer is enhanced by the following API:\n\n|property|type|meaning|\n|----|---|-----|\n|mode|int constant|see render mode above in form section|\n|gridBreakPoint|string / null|Bootstrap grid breakpoint for side-by-side view. Default is 'sm'|\n|groupHidden| bool| if true, hidden fields will be grouped at the end. If false, hidden fields are placed where they were added. Default is true.|\n\n### Grid\n\nThe library provides a way to programmatically place controls into Bootstrap grid and thus\ngreatly reduces the need for manual rendering.\n\nSimply add a new row like this:\n```php\n$row = $form-\u003eaddRow();\n$row-\u003eaddCell(6)\n    -\u003eaddText('firstname', 'First name');\n$row-\u003eaddCell(6)\n    -\u003eaddText('surname', 'Surname');\n```\n\nAnd firstname and surname will be beside each other.\n\n#### Notes\n\n- By calling `getElementPrototype()` on row or cell, you can influence the elements of row / cell\n- A cell can only hold one control (or none)\n- You are not limited to numerical column specification. \nAlso check out `\\Czubehead\\BootstrapForms\\Grid\\BootstrapCell::COLUMNS_NONE` \nand `\\Czubehead\\BootstrapForms\\Grid\\BootstrapCell::COLUMNS_AUTO`\n\n# Assisted manual rendering\n\nWhy do we use manual rendering? Mostly to just rearrange the inputs, we rarely\ncreate a completely different feel.\nBut there is a hefty price for using manual rendering - we have to do almost everything\nourselves, even the things the renderer could do for us. Only if there were a way to\nlet the renderer do most of the work...\n\n## What can it do\n\nAssisted manual rendering will render label-input pairs for you using a filter. \nThis means that it will take care of wrapping things into `div.form-group` and validation \nmessages - the most mundane thing to implement in a template. \n\n## Implementation\n\nFirst of all, **you must implement this yourself, this won't work out of the box!**\nThe implementation is quite dirty, but I think the benefits outweigh this cost.\n\nIt works like this: \n### 1. Implement a filter\nadd a new filter to your latte engine, for example:\n```php\n$this-\u003etemplate-\u003eaddFilter('formPair', function ($control) {\n    /** @var BootstrapRenderer $renderer */\n    $renderer = $control-\u003eform-\u003erenderer;\n    $renderer-\u003eattachForm($control-\u003eform);\n\n    return $renderer-\u003erenderPair($control);\n});\n```\n### 2. Use it\n```php\n{$form['firstname']|formPair|noescape}\n```\n\nThat will result in\n```html\n\u003cdiv class=\"form-group row\"\u003e\n    \u003clabel for=\"frm-form-firstname\" class=\"col-sm-3\"\u003eFirst name\u003c/label\u003e\n\n    \u003cdiv class=\"col-sm-9\"\u003e\n        \u003cinput type=\"text\" name=\"firstname\" id=\"frm-form-firstname\" class=\"form-control\"\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n------\n\n- Made by [czubehead](https://petrcech.eu)\n- [API documentation](https://czubehead.github.io/bootstrap-4-forms/)\n- [Componette link](https://componette.com/czubehead/bootstrap-4-forms/)\n- [Packagist link](https://packagist.org/packages/czubehead/bootstrap-4-forms)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fczubehead%2Fbootstrap-4-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fczubehead%2Fbootstrap-4-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fczubehead%2Fbootstrap-4-forms/lists"}