Nette extension for Bootstrap 4 forms
Please use English in potential issues, let's keep it clean, shall we?
This is a library that lets you use Bootstrap 4 forms in Nette framework.
Rather than being just a renderer, this introduces a custom set of controls (which covers all default controls) and a renderer.
Note that this is an alpha, so it may be buggy. That is where you can help by reporting issues.
- Fully valid Bootstrap 4 forms HTML generation
- All layout modes: vertical, side-by-side and inline
- TextInput placeholders
- Highly configurable renderer
- Custom Bootstrap controls
- DateTime picker, variety of human readable date/time formats, placeholder example generation
- Validation styles
The best way is via composer:
composer require czubehead/bootstrap-4-forms
Note that if you simply clone the main branch from this repo, it is not guaranteed to work, use releases instead
- Works with
Nette\Forms\Form, so you need the whole Nette framework.
- PHP 5.6+
- Client-side bootstrap 4 stylesheets and JS (obviously)
This package is compatible with any version version of Bootstrap 4 (last tested on v4.0.0-beta.2)
Probably the main class you will be using is
It has all the features of this library pre-configured and extends
Nette\Application\UI\Form functionality by:
- Only accepts
Czubehead\BootstrapForms\BootstrapRendereror its children (which is default)
- Built-in AJAX support (adds
ajaxclass upon rendering) via
- Has direct access to render mode property of renderer (property
- All add* methods are overridden by bootstrap-enabled controls
$form = new BootstrapForm; $form->renderMode = RenderMode::Vertical;
It will behave pretty much the same as the default Nette form
- Vertical (
Enums\RenderMode::VerticalMode) all controls are below their labels
- Side-by-side (
Enums\RenderMode::SideBySideMode) controls have their labels on the left. It is made up using Bootstrap grid. The default layout is 3 columns for labels and 9 for controls. This can be altered using
Enums\RenderMode::Inlineall controls and labels will be in one enormous line
Each default control has has been extended bootstrap-enabled controls and
will render itself correctly even without the renderer. You can distinguish
them easily - they all have
TextInput can have placeholder set (
$input->setPlaceholder($val)). All text-based
inputs (except for TextArea) inherit from this control.
Its format can be set (
$input->setFormat($str)), the default is d.m.yyyy h:mm
(though you must specify it in standard PHP format!).
You may use DateTimeFormats class constants as a list of pretty much all formats:
DateTimeFormat::D_DMY_DOTS_NO_LEAD . ' ' . DateTimeFormat::T_24_NO_LEAD
is the default format for DateTime. See its PhpDoc for further explanation.
Nothing out of ordinary, but it Needs
<html lang="xx"> attribute to work.
buttonCaption, which sets the text on the button on the left.
The right button is set by Bootstrap CSS, which depends
These can accept nested arrays of options.
[ 'sub' => [ 1 => 'opt1', 2 => 'opt2' ], 3 => 'opt3', ]
<optgroup label="sub"> <option value="1">opt1</option> <option value="2">opt2</option> </optgroup> <option value="3">opt3</option>
The renderer is enhanced by the following API:
|mode||see render mode above in form section|
|gridBreakPoint||Bootstrap grid breakpoint for side-by-side view. Default is 'sm'|
|groupInlineInputs||If consecutive inline elements, such as buttons should be grouped together. For list of elements, see