Skip to content

[Form] Adds references to new Form themes #15414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 7, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions form/form_themes.rst
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,32 @@ in a single Twig template and they are enabled in the
updated for `Bootstrap 4 CSS framework`_ styles.
* `bootstrap_4_horizontal_layout.html.twig`_, same as
``bootstrap_3_horizontal_layout.html.twig`` but updated for Bootstrap 4 styles.
* `bootstrap_5_layout.html.twig`_, same as ``bootstrap_4_layout.html.twig``, but
updated for `Bootstrap 5 CSS framework`_ styles.
* `bootstrap_5_horizontal_layout.html.twig`_, same as
``bootstrap_4_horizontal_layout.html.twig`` but updated for Bootstrap 5 styles.
* `foundation_5_layout.html.twig`_, wraps each form field inside a ``<div>``
element with the appropriate CSS classes to apply the default styles of the
version 5 of `Foundation CSS framework`_.
* `foundation_6_layout.html.twig`_, wraps each form field inside a ``<div>``
element with the appropriate CSS classes to apply the default styles of the
version 6 of `Foundation CSS framework`_.
* `tailwind_2_layout.html.twig`_, wraps each form field inside a ``<div>``
element with the absolute minimum styles to make them usable. It is based on the
`Tailwind CSS form plugin`_.

.. versionadded:: 5.1

The ``foundation_6_layout.html.twig`` was introduced in Symfony 5.1.

.. versionadded:: 5.3

The ``bootstrap_5_layout.html.twig``, ``bootstrap_5_horizontal_layout.html.twig`` and ``tailwind_2_layout.html.twig`` were introduced in Symfony 5.3.

.. tip::

Read the article about the :doc:`Bootstrap 4 Symfony form theme </form/bootstrap4>`
to learn more about it.
Read the articles about :doc:`Bootstrap 4 Symfony form theme </form/bootstrap4>` and :doc:`Bootstrap 5 Symfony form theme </form/bootstrap5>`
to learn more about them.

.. _forms-theming-global:
.. _forms-theming-twig:
Expand Down Expand Up @@ -635,10 +646,15 @@ is a collection of fields (e.g. a whole form), and not just an individual field:
.. _`bootstrap_3_horizontal_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_horizontal_layout.html.twig
.. _`bootstrap_4_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
.. _`bootstrap_4_horizontal_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_horizontal_layout.html.twig
.. _`bootstrap_5_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_layout.html.twig
.. _`bootstrap_5_horizontal_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_horizontal_layout.html.twig
.. _`Bootstrap 3 CSS framework`: https://getbootstrap.com/docs/3.4/
.. _`Bootstrap 4 CSS framework`: https://getbootstrap.com/docs/4.4/
.. _`Bootstrap 4 CSS framework`: https://getbootstrap.com/docs/4.6/
.. _`Bootstrap 5 CSS framework`: https://getbootstrap.com/docs/5.0/
.. _`foundation_5_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/foundation_5_layout.html.twig
.. _`foundation_6_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/foundation_6_layout.html.twig
.. _`Foundation CSS framework`: https://get.foundation/
.. _`tailwind_2_layout.html.twig`: https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/tailwind_2_layout.html.twig
.. _`Tailwind CSS form plugin`: https://tailwindcss-forms.vercel.app/
.. _`Twig "use" tag`: https://twig.symfony.com/doc/2.x/tags/use.html
.. _`Twig parent() function`: https://twig.symfony.com/doc/2.x/functions/parent.html