New in Symfony 3.4: Bootstrap 4 form theme

Contributed by
Hidde Wieringa
in #21751.

Bootstrap, the most popular front-end component library, has been working for years in its next major version: Boostrap 4. This new version switches from Less to Sass, improves the grid system, includes optional support for Flexbox and a ton of other changes and improvements.

Given that Bootstrap 4.0.0 is in beta since August 2017, we decided to add a new form theme for Bootstrap 4 in Symfony 3.4. Following Symfony Form theming rules, you can apply this theme just to a particular form in a Twig template:

1
2
3
4
5

{# add this at the beginning of your template #}
{% form_theme form 'bootstrap_4_layout.html.twig' %}

{# this alternative theme is also available #}
{% form_theme form 'bootstrap_4_horizontal_layout.html.twig' %}

However, if you prefer to apply this theme to all the forms of your application, add this to the Twig configuration:

1
2
3
4
5
6

# app/config/config.yml
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

    # this alternative theme is also available
    # form_themes: ['bootstrap_4_horizontal_layout.html.twig']

This new Bootstrap 4 form theme is pretty similar to the existing Bootstrap 3 theme, but it contains tweaks and minor fixes for all the form elements, as you can see in the following image (Bootstrap 4 left, Bootstrap 3 right):