From 6effb03fcb471c9330457e9d72710428b8d7ddff Mon Sep 17 00:00:00 2001
From: Tobias Nyholm <tobias.nyholm@gmail.com>
Date: Mon, 26 Feb 2018 19:10:05 +0100
Subject: [PATCH 1/9] Adding a documentation page about Bootstrap 4 form theme

---
 form/bootstrap4.rst         | 66 +++++++++++++++++++++++++++++++++++++
 form/form_customization.rst |  4 +++
 2 files changed, 70 insertions(+)
 create mode 100644 form/bootstrap4.rst

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
new file mode 100644
index 00000000000..dabcfedb57c
--- /dev/null
+++ b/form/bootstrap4.rst
@@ -0,0 +1,66 @@
+Bootstrap 4 Form Theme
+======================
+
+The Boostrap 4 form theme is a great way to make sure your project gets nice looking
+forms without you have to do any work at all. Read about all of the features of
+Bootstrap in `their documentation`_.
+
+An example how to use the Boostrap 4 theme might look like this. You could of course
+use any sources for the Boostrap CSS and JavaScript.
+
+.. code-block:: html+twig
+
+    {% form_theme form 'bootstrap_4_layout.html.twig' %}
+
+    {% block head %}
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    {% endblock head %}
+
+    {% block body %}
+      <h1>Here is my form:</h1>
+      {{ form(form) }}
+    {% endblock body %}
+
+
+Accessibility
+-------------
+
+The Bootstrap 4 framework has done a good job making in accessible for function
+variations like impaired vision and cognitive ability. Symfony has taken this one
+step further to make sure the form theme complies with the `WCAG2.0 standard`_.
+
+This does not mean that your entire website automatically complies with the full
+standard, but it does mean that you have come far in your work to create a design
+for **all** users.
+
+Custom Forms
+------------
+
+Bootstrap 4 has a feature called "`custom forms`_". You can enable that on your
+Symfony Form ``RadioType`` and ``CheckboxType`` by adding a class called ``radio-custom``
+and ``checkbox-custom`` respectively.
+
+.. code-block:: html+twig
+
+    {{ form_row(form.myRadio, {attr: {class: 'radio-custom'} }) }}
+    {{ form_row(form.myCheckbox, {attr: {class: 'checkbox-custom'} }) }}
+
+Labels and Errors
+-----------------
+
+When you use the Bootstrap form themes and render the fields manually, calling
+``form_label()`` for a checkbox/radio field doesn't show anything. Due to Bootstrap
+internals, the label is already shown by ``form_widget()``.
+
+You may also note that the form errors is rendered **inside** the ``<label>``. This
+is done to make sure there is a strong connection between the error and in the
+``<input>``, as required by the `WCAG2.0 standard`_.
+
+
+
+.. _`their documentation`: https://getbootstrap.com/docs/4.0/
+.. _`WCAG2.0 standard`: https://www.w3.org/TR/WCAG20/
+.. _`custom forms`: https://getbootstrap.com/docs/4.0/components/forms/#custom-forms
diff --git a/form/form_customization.rst b/form/form_customization.rst
index f50325bfc09..3a71e647109 100644
--- a/form/form_customization.rst
+++ b/form/form_customization.rst
@@ -127,6 +127,10 @@ fragment needed to render every part of a form:
     calling ``form_label()`` for a checkbox/radio field doesn't show anything.
     Due to Bootstrap internals, the label is already shown by ``form_widget()``.
 
+.. tip::
+
+    Read more about :doc:`Bootstrap 4 form theme </form/bootstrap4>`.
+
 In the next section you will learn how to customize a theme by overriding
 some or all of its fragments.
 

From 8a3b9cb85ee4d633a1435d1a89ce4037924640cf Mon Sep 17 00:00:00 2001
From: Tobias Nyholm <tobias.nyholm@gmail.com>
Date: Mon, 26 Feb 2018 19:20:44 +0100
Subject: [PATCH 2/9] cs

---
 form/bootstrap4.rst | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index dabcfedb57c..d069e06cfa5 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -24,7 +24,6 @@ use any sources for the Boostrap CSS and JavaScript.
       {{ form(form) }}
     {% endblock body %}
 
-
 Accessibility
 -------------
 
@@ -59,8 +58,6 @@ You may also note that the form errors is rendered **inside** the ``<label>``. T
 is done to make sure there is a strong connection between the error and in the
 ``<input>``, as required by the `WCAG2.0 standard`_.
 
-
-
 .. _`their documentation`: https://getbootstrap.com/docs/4.0/
 .. _`WCAG2.0 standard`: https://www.w3.org/TR/WCAG20/
 .. _`custom forms`: https://getbootstrap.com/docs/4.0/components/forms/#custom-forms

From 5657f66ea1151f7ecfe81c470ceedf7b2a7be5ec Mon Sep 17 00:00:00 2001
From: Tobias Nyholm <tobias.nyholm@gmail.com>
Date: Tue, 27 Feb 2018 10:19:36 +0100
Subject: [PATCH 3/9] Updated the intro

---
 form/bootstrap4.rst | 45 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index d069e06cfa5..ca57d0795fe 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -1,27 +1,52 @@
 Bootstrap 4 Form Theme
 ======================
 
-The Boostrap 4 form theme is a great way to make sure your project gets nice looking
-forms without you have to do any work at all. Read about all of the features of
-Bootstrap in `their documentation`_.
-
-An example how to use the Boostrap 4 theme might look like this. You could of course
-use any sources for the Boostrap CSS and JavaScript.
+Symfony provides several ways of integrating Bootstrap into your application. The
+most straightforward way is to just add the required ``<link>`` and ``<script>``
+elements in your templates (usually you only include them in the main layout
+template which other templates extend from):
 
 .. code-block:: html+twig
 
-    {% form_theme form 'bootstrap_4_layout.html.twig' %}
+    {# templates/base.html.twig #}
 
-    {% block head %}
+    {# beware that the blocks in your template may be named different #}
+    {% block head_css %}
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    {% endblock %}
+    {% block head_js %}
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     {% endblock head %}
 
+If your application uses modern front-end practices, it's better to use
+:ref:`Webpack Encore </frontend>` and follow :ref:`this tutorial </frontend/encore/bootstrap>`
+to import Bootstrap's sources into your SCSS and JavaScript files.
+
+The next step is to configure the Symfony application to use Bootstrap 4 styles
+when rendering forms. If you want to apply them to all forms, define this
+configuration:
+
+.. code-block:: yaml
+
+    # config/packages/twig.yaml
+    twig:
+        # ...
+        form_themes: ['bootstrap_4_layout.html.twig']
+
+If you prefer to apply the Bootstrap styles on a form to form basis, include the
+``form_theme`` tag in the templates where those forms are used:
+
+.. code-block:: twig
+
+    {# ... #}
+    {# this tag only applies to the forms defined in this template #}
+    {% form_theme form 'bootstrap_4_layout.html.twig' %}
+
     {% block body %}
-      <h1>Here is my form:</h1>
-      {{ form(form) }}
+        <h1>User Sign Up:</h1>
+        {{ form(form) }}
     {% endblock body %}
 
 Accessibility

From 9852b4c2367c8f462288c2b80ebbcf9cbe4043a8 Mon Sep 17 00:00:00 2001
From: Tobias Nyholm <tobias.nyholm@gmail.com>
Date: Wed, 28 Feb 2018 19:11:27 +0100
Subject: [PATCH 4/9] typo

---
 form/bootstrap4.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index ca57d0795fe..c443566151b 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -21,7 +21,7 @@ template which other templates extend from):
     {% endblock head %}
 
 If your application uses modern front-end practices, it's better to use
-:ref:`Webpack Encore </frontend>` and follow :ref:`this tutorial </frontend/encore/bootstrap>`
+:doc:`Webpack Encore </frontend>` and follow :doc:`this tutorial </frontend/encore/bootstrap>`
 to import Bootstrap's sources into your SCSS and JavaScript files.
 
 The next step is to configure the Symfony application to use Bootstrap 4 styles

From 3757a0251948e0fafef73e45f8956b9a29b270be Mon Sep 17 00:00:00 2001
From: Nyholm <tobias.nyholm@gmail.com>
Date: Sun, 4 Mar 2018 12:02:32 +0100
Subject: [PATCH 5/9] fixed typos

---
 form/bootstrap4.rst         | 6 +++---
 form/form_customization.rst | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index c443566151b..e3b47152bec 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -52,7 +52,7 @@ If you prefer to apply the Bootstrap styles on a form to form basis, include the
 Accessibility
 -------------
 
-The Bootstrap 4 framework has done a good job making in accessible for function
+The Bootstrap 4 framework has done a good job making it accessible for function
 variations like impaired vision and cognitive ability. Symfony has taken this one
 step further to make sure the form theme complies with the `WCAG2.0 standard`_.
 
@@ -79,8 +79,8 @@ When you use the Bootstrap form themes and render the fields manually, calling
 ``form_label()`` for a checkbox/radio field doesn't show anything. Due to Bootstrap
 internals, the label is already shown by ``form_widget()``.
 
-You may also note that the form errors is rendered **inside** the ``<label>``. This
-is done to make sure there is a strong connection between the error and in the
+You may also note that the form errors are rendered **inside** the ``<label>``. This
+is done to make sure there is a strong connection between the error and in
 ``<input>``, as required by the `WCAG2.0 standard`_.
 
 .. _`their documentation`: https://getbootstrap.com/docs/4.0/
diff --git a/form/form_customization.rst b/form/form_customization.rst
index 3a71e647109..b5d43c40930 100644
--- a/form/form_customization.rst
+++ b/form/form_customization.rst
@@ -129,7 +129,7 @@ fragment needed to render every part of a form:
 
 .. tip::
 
-    Read more about :doc:`Bootstrap 4 form theme </form/bootstrap4>`.
+    Read more about the :doc:`Bootstrap 4 form theme </form/bootstrap4>`.
 
 In the next section you will learn how to customize a theme by overriding
 some or all of its fragments.

From dc1fced788342a1c64e79d7b20e23756b10eaff9 Mon Sep 17 00:00:00 2001
From: Nyholm <tobias.nyholm@gmail.com>
Date: Sun, 4 Mar 2018 12:04:38 +0100
Subject: [PATCH 6/9] Added config block

---
 form/bootstrap4.rst | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index e3b47152bec..221f5f415fe 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -28,12 +28,43 @@ The next step is to configure the Symfony application to use Bootstrap 4 styles
 when rendering forms. If you want to apply them to all forms, define this
 configuration:
 
-.. code-block:: yaml
+.. configuration-block::
+
+    .. code-block:: yaml
+
+        # config/packages/twig.yaml
+        twig:
+            form_themes: ['bootstrap_4_layout.html.twig']
+
+    .. code-block:: xml
+
+        <!-- config/packages/twig.xml -->
+        <?xml version="1.0" encoding="UTF-8" ?>
+        <container xmlns="http://symfony.com/schema/dic/services"
+            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+            xmlns:twig="http://symfony.com/schema/dic/twig"
+            xsi:schemaLocation="http://symfony.com/schema/dic/services
+                http://symfony.com/schema/dic/services/services-1.0.xsd
+                http://symfony.com/schema/dic/twig
+                http://symfony.com/schema/dic/twig/twig-1.0.xsd">
+
+            <twig:config>
+                <twig:form-theme>bootstrap_4_layout.html.twig</twig:form-theme>
+                <!-- ... -->
+            </twig:config>
+        </container>
+
+    .. code-block:: php
+
+        // config/packages/twig.php
+        $container->loadFromExtension('twig', array(
+            'form_themes' => array(
+                'bootstrap_4_layout.html.twig',
+            ),
+
+            // ...
+        ));
 
-    # config/packages/twig.yaml
-    twig:
-        # ...
-        form_themes: ['bootstrap_4_layout.html.twig']
 
 If you prefer to apply the Bootstrap styles on a form to form basis, include the
 ``form_theme`` tag in the templates where those forms are used:

From 747712e925ad4ee2156ca628661102f2ea814513 Mon Sep 17 00:00:00 2001
From: Nyholm <tobias.nyholm@gmail.com>
Date: Sun, 4 Mar 2018 12:06:23 +0100
Subject: [PATCH 7/9] Added note to copy js/css from docs

---
 form/bootstrap4.rst | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index 221f5f415fe..80f9b8f0a6b 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -12,12 +12,10 @@ template which other templates extend from):
 
     {# beware that the blocks in your template may be named different #}
     {% block head_css %}
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <!-- Copy CSS from https://getbootstrap.com/docs/4.0/getting-started/introduction/#css -->
     {% endblock %}
     {% block head_js %}
-        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+        <!-- Copy JavaScript from https://getbootstrap.com/docs/4.0/getting-started/introduction/#js -->
     {% endblock head %}
 
 If your application uses modern front-end practices, it's better to use
@@ -65,7 +63,6 @@ configuration:
             // ...
         ));
 
-
 If you prefer to apply the Bootstrap styles on a form to form basis, include the
 ``form_theme`` tag in the templates where those forms are used:
 

From 0b47211d1cb5f58d4f8f335d776996542f6cd348 Mon Sep 17 00:00:00 2001
From: Nyholm <tobias.nyholm@gmail.com>
Date: Sun, 4 Mar 2018 13:30:39 +0100
Subject: [PATCH 8/9] Fixes

---
 form/bootstrap4.rst | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index 80f9b8f0a6b..020ebd6bc03 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -82,7 +82,7 @@ Accessibility
 
 The Bootstrap 4 framework has done a good job making it accessible for function
 variations like impaired vision and cognitive ability. Symfony has taken this one
-step further to make sure the form theme complies with the `WCAG2.0 standard`_.
+step further to make sure the form theme complies with the `WCAG 2.0 standard`_.
 
 This does not mean that your entire website automatically complies with the full
 standard, but it does mean that you have come far in your work to create a design
@@ -104,13 +104,13 @@ Labels and Errors
 -----------------
 
 When you use the Bootstrap form themes and render the fields manually, calling
-``form_label()`` for a checkbox/radio field doesn't show anything. Due to Bootstrap
-internals, the label is already shown by ``form_widget()``.
+``form_label()`` for a checkbox/radio field doesn't render anything. Due to Bootstrap
+internals, the label is already rendered by ``form_widget()``.
 
-You may also note that the form errors are rendered **inside** the ``<label>``. This
-is done to make sure there is a strong connection between the error and in
-``<input>``, as required by the `WCAG2.0 standard`_.
+Form errors are rendered **inside** the ``<label>`` element to make sure there
+is a strong connection between the error and its ``<input>``, as required by the
+`WCAG 2.0 standard`_.
 
 .. _`their documentation`: https://getbootstrap.com/docs/4.0/
-.. _`WCAG2.0 standard`: https://www.w3.org/TR/WCAG20/
+.. _`WCAG 2.0 standard`: https://www.w3.org/TR/WCAG20/
 .. _`custom forms`: https://getbootstrap.com/docs/4.0/components/forms/#custom-forms

From 69f5d68aa3f151e80504650f83667863404b69bd Mon Sep 17 00:00:00 2001
From: Nyholm <tobias.nyholm@gmail.com>
Date: Sun, 4 Mar 2018 13:31:16 +0100
Subject: [PATCH 9/9] Use the term "functional variations"

---
 form/bootstrap4.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/form/bootstrap4.rst b/form/bootstrap4.rst
index 020ebd6bc03..15884d29a36 100644
--- a/form/bootstrap4.rst
+++ b/form/bootstrap4.rst
@@ -80,7 +80,7 @@ If you prefer to apply the Bootstrap styles on a form to form basis, include the
 Accessibility
 -------------
 
-The Bootstrap 4 framework has done a good job making it accessible for function
+The Bootstrap 4 framework has done a good job making it accessible for functional
 variations like impaired vision and cognitive ability. Symfony has taken this one
 step further to make sure the form theme complies with the `WCAG 2.0 standard`_.