# How to use automatically rendered Bootstrap (4) forms with Nette Framework

Goal of this blog post is to give you quick introduction to contributte/forms-bootstrap (opens new window) package and how it can be used inside your project.

# Benefits

This package is build on top of nette forms and adds few interesting functionalities to nette forms.

  • Boostrap 4 renderer with 3 different render modes (vertical, inline and side by side)
  • Built-in AJAX support through ajaxproperty
  • All regular controls are extended with bootstrap-enabled controls
  • Grid support so you can render forms into multiple columns directly without manual rendering
  • Additional Date/DateTime inputs
  • Ability of assisted manual rendering (renders wholediv.form-group label, input and validation messages with one latte filter)

# Instalation

Best and easiest way to install package is with composer.

composer require contributte/forms-bootstrap
1

# Usage

It's pretty simmiliar to nette/forms (opens new window) with some additional features. This quick example:

$form->addText('title', 'Title')->setRequired();  
$form->addTextArea('content', 'Content', 50, 25);  
$form->addDateTime('start_date', 'Start date');   
$form->addSubmit('save', 'Save');
1
2
3
4

By default bootstrap theme would look something like that: