PHPackages                             czubehead/bootstrap-4-forms - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. czubehead/bootstrap-4-forms

ActiveLibrary[Utility & Helpers](/categories/utility)

czubehead/bootstrap-4-forms
===========================

Nette extension for Bootstrap 4 forms

v0.3(7y ago)1019.5k14[3 issues](https://github.com/czubehead/bootstrap-4-forms/issues)[3 PRs](https://github.com/czubehead/bootstrap-4-forms/pulls)1MITPHPPHP >=5.6

Since Jul 9Pushed 7y ago4 watchersCompare

[ Source](https://github.com/czubehead/bootstrap-4-forms)[ Packagist](https://packagist.org/packages/czubehead/bootstrap-4-forms)[ Docs](https://github.com/czubehead/bootstrap-4-forms)[ RSS](/packages/czubehead-bootstrap-4-forms/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (7)Dependencies (2)Versions (9)Used By (1)

Bootstrap 4 forms for Nette
===========================

[](#bootstrap-4-forms-for-nette)

**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](http://nette.org).

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.

[See example here](https://codepen.io/czubehead/pen/ZryJQd?editors=1000)

Features
--------

[](#features)

- [Bootstrap 4 forms](http://getbootstrap.com/docs/4.0/components/forms/) HTML generation
- All layout modes: vertical, side-by-side and inline
- TextInput placeholders
- Highly configurable renderer
- [Custom Bootstrap controls](http://getbootstrap.com/docs/4.0/components/forms/#custom-forms)
- DateTime picker, variety of human readable date/time formats, placeholder example generation
- [Validation styles](http://getbootstrap.com/docs/4.0/components/forms/#server-side)
- Programmatically generated [Bootstrap grid](https://getbootstrap.com/docs/4.1/layout/grid/)
- Assisted manual rendering

Installation
------------

[](#installation)

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*

### Requirements

[](#requirements)

- Works with `Nette\Application\UI\Form`, not `Nette\Forms\Form`, so you need the whole Nette framework.
- PHP 5.6+
- Client-side bootstrap 4 stylesheets and JS (obviously)

### Compatibility

[](#compatibility)

This package is compatible with any version version of Bootstrap 4 (last tested on v4.0.0-beta.2)

How to use
----------

[](#how-to-use)

### Form

[](#form)

Probably the main class you will be using is `Czubehead\BootstrapForms\BootstrapForm`. It has all the features of this library pre-configured and extends `Nette\Application\UI\Form` functionality by:

- Only accepts `Czubehead\BootstrapForms\BootstrapRenderer` or its children (which is default)
- Built-in AJAX support (adds `ajax` class upon rendering) via `ajax`(bool) property
- Has direct access to render mode property of renderer (property `renderMode`)
- 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, with the exception of not grouping buttons. That feature would only add unnecessary and deceiving overhead to this library, **use grid instead, it will give you much finer control**

#### Render modes

[](#render-modes)

1. **Vertical** (`Enums\RenderMode::VerticalMode`) all controls are below their labels
2. **Side-by-side** (`Enums\RenderMode::SideBySideMode`) controls have their labels on the left. It is made up using [Bootstrap grid](http://v4-alpha.getbootstrap.com/layout/grid/). The default layout is 3 columns for labels and 9 for controls. This can be altered using `BootstrapRenderer::setColumns($label, $input)`.
3. **Inline** `Enums\RenderMode::Inline` all controls and labels will be in one enormous line

### Controls / inputs

[](#controls--inputs)

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 `Input` suffix.

#### TextInput

[](#textinput)

TextInput can have placeholder set (`$input->setPlaceholder($val)`). All text-based inputs (except for TextArea) inherit from this control.

#### DateTimeInput

[](#datetimeinput)

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.

#### UploadInput

[](#uploadinput)

Nothing out of ordinary, but it **Needs `` attribute** to work.

Has property `buttonCaption`, which sets the text on the button on the left. The right button is set by [Bootstrap CSS](http://getbootstrap.com/docs/4.0/components/forms/#file-browser), which depends ``.

#### SelectInput, MultiSelectInput

[](#selectinput-multiselectinput)

These can accept nested arrays of options.

```
[
    'sub' => [
        1 => 'opt1',
        2 => 'opt2'
    ],
    3     => 'opt3',
]
```

will generate

```

    opt1
    opt2

opt3
```

### Renderer

[](#renderer)

The renderer is enhanced by the following API:

propertytypemeaningmodeint constantsee render mode above in form sectiongridBreakPointstring / nullBootstrap grid breakpoint for side-by-side view. Default is 'sm'groupHiddenboolif true, hidden fields will be grouped at the end. If false, hidden fields are placed where they were added. Default is true.### Grid

[](#grid)

The library provides a way to programmatically place controls into Bootstrap grid and thus greatly reduces the need for manual rendering.

Simply add a new row like this:

```
$row = $form->addRow();
$row->addCell(6)
    ->addText('firstname', 'First name');
$row->addCell(6)
    ->addText('surname', 'Surname');
```

And firstname and surname will be beside each other.

#### Notes

[](#notes)

- By calling `getElementPrototype()` on row or cell, you can influence the elements of row / cell
- A cell can only hold one control (or none)
- You are not limited to numerical column specification. Also check out `\Czubehead\BootstrapForms\Grid\BootstrapCell::COLUMNS_NONE`and `\Czubehead\BootstrapForms\Grid\BootstrapCell::COLUMNS_AUTO`

Assisted manual rendering
=========================

[](#assisted-manual-rendering)

Why do we use manual rendering? Mostly to just rearrange the inputs, we rarely create a completely different feel. But there is a hefty price for using manual rendering - we have to do almost everything ourselves, even the things the renderer could do for us. Only if there were a way to let the renderer do most of the work...

What can it do
--------------

[](#what-can-it-do)

Assisted manual rendering will render label-input pairs for you using a filter. This means that it will take care of wrapping things into `div.form-group` and validation messages - the most mundane thing to implement in a template.

Implementation
--------------

[](#implementation)

First of all, **you must implement this yourself, this won't work out of the box!**The implementation is quite dirty, but I think the benefits outweigh this cost.

It works like this:

### 1. Implement a filter

[](#1-implement-a-filter)

add a new filter to your latte engine, for example:

```
$this->template->addFilter('formPair', function ($control) {
    /** @var BootstrapRenderer $renderer */
    $renderer = $control->form->renderer;
    $renderer->attachForm($control->form);

    return $renderer->renderPair($control);
});
```

### 2. Use it

[](#2-use-it)

```
{$form['firstname']|formPair|noescape}
```

That will result in

```

    First name

```

---

- Made by [czubehead](https://petrcech.eu)
- [API documentation](https://czubehead.github.io/bootstrap-4-forms/)
- [Componette link](https://componette.com/czubehead/bootstrap-4-forms/)
- [Packagist link](https://packagist.org/packages/czubehead/bootstrap-4-forms)

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance14

Infrequent updates — may be unmaintained

Popularity32

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 95.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~53 days

Recently: every ~75 days

Total

7

Last Release

2912d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a58d93614ec7add6cc8837bafc7e994df5b579cc00a736b701b4fecb62c60cf6?d=identicon)[czubehead](/maintainers/czubehead)

---

Top Contributors

[![czubehead](https://avatars.githubusercontent.com/u/7609568?v=4)](https://github.com/czubehead "czubehead (58 commits)")[![PavelJurasek](https://avatars.githubusercontent.com/u/1270132?v=4)](https://github.com/PavelJurasek "PavelJurasek (2 commits)")[![mskocik](https://avatars.githubusercontent.com/u/25513620?v=4)](https://github.com/mskocik "mskocik (1 commits)")

---

Tags

bootstrap-formbootstrap-form-builderbootstrap4composer-packagenettenette-formnette-frameworkpackagistnettelibrarybootstrapForms

### Embed Badge

![Health badge](/badges/czubehead-bootstrap-4-forms/health.svg)

```
[![Health](https://phpackages.com/badges/czubehead-bootstrap-4-forms/health.svg)](https://phpackages.com/packages/czubehead-bootstrap-4-forms)
```

###  Alternatives

[contributte/forms-bootstrap

Nette extension for Bootstrap forms

211.1M4](/packages/contributte-forms-bootstrap)[contributte/forms-multiplier

Multiplier for nette forms

281.4M3](/packages/contributte-forms-multiplier)[kdyby/forms-replicator

Nette forms container replicator aka addDynamic

32997.7k6](/packages/kdyby-forms-replicator)[contributte/forms-wizard

Wizard component for nette/forms

15783.7k](/packages/contributte-forms-wizard)[webchemistry/forms-multiplier

Multiplier for nette forms

2860.9k](/packages/webchemistry-forms-multiplier)[nepada/form-renderer

Latte template based form renderer for Nette forms with full support for Bootstrap 3, 4 & 5.

11251.0k](/packages/nepada-form-renderer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)