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

[Form] Add support for Bootstrap 4 forms #16289

Closed
javiereguiluz opened this Issue Oct 19, 2015 · 9 comments

Comments

Projects
None yet
8 participants
@javiereguiluz
Member

javiereguiluz commented Oct 19, 2015

Bootstrap 4 is still in alpha but we should prepare for when it's released (no specific date yet). Regarding the form component, changes from Bootstrap 3 are small, but nonetheless important.

bootstrap_4_forms

Source: http://v4-alpha.getbootstrap.com/migration/#forms

@FractalizeR

This comment has been minimized.

Show comment
Hide comment
@FractalizeR

FractalizeR Jan 24, 2016

Contributor

I think this is incomplete. I tried this, but it looks like form errors are no longer printed in red for example. It can be achieved using text-danger style for example.

Contributor

FractalizeR commented Jan 24, 2016

I think this is incomplete. I tried this, but it looks like form errors are no longer printed in red for example. It can be achieved using text-danger style for example.

@raresserban

This comment has been minimized.

Show comment
Hide comment
@raresserban

raresserban Jul 5, 2017

Just noticed this and in my opinion for this to be complete it should also include a layout where the custom Bootstrap 4 elements are used.

raresserban commented Jul 5, 2017

Just noticed this and in my opinion for this to be complete it should also include a layout where the custom Bootstrap 4 elements are used.

@szymach

This comment has been minimized.

Show comment
Hide comment
@szymach

szymach Jul 5, 2017

But Bootstrap4 is still in alpha stage, is there a point introducing a template that may simply stop working after another alpha release?

szymach commented Jul 5, 2017

But Bootstrap4 is still in alpha stage, is there a point introducing a template that may simply stop working after another alpha release?

@hiddewie

This comment has been minimized.

Show comment
Hide comment
@hiddewie

hiddewie Jul 5, 2017

Contributor

There will be a beta release very soon, see https://github.com/twbs/bootstrap/projects/3.

Contributor

hiddewie commented Jul 5, 2017

There will be a beta release very soon, see https://github.com/twbs/bootstrap/projects/3.

@szymach

This comment has been minimized.

Show comment
Hide comment
@szymach

szymach Jul 5, 2017

Well that still may change to various reasons, it would not be uncommon for release date to be postponed. Anyhow, I think it would be better to wait until it starts approaching a stable release, since we have no idea how much it could change.

szymach commented Jul 5, 2017

Well that still may change to various reasons, it would not be uncommon for release date to be postponed. Anyhow, I think it would be better to wait until it starts approaching a stable release, since we have no idea how much it could change.

@PhilETaylor

This comment has been minimized.

Show comment
Hide comment
@PhilETaylor

PhilETaylor Aug 21, 2017

Contributor

Bump - cough - Currently v4.0.0-beta http://getbootstrap.com/

Contributor

PhilETaylor commented Aug 21, 2017

Bump - cough - Currently v4.0.0-beta http://getbootstrap.com/

@hiddewie

This comment has been minimized.

Show comment
Hide comment
@hiddewie

hiddewie Aug 21, 2017

Contributor

@PhilETaylor See PR #21751. It has been open for quite some time now. Any reactions/improvements are welcome. I hope the PR can be merged soon so any Symfony + Bootstrap 4 projects start experimenting with the beta including some nice automatically styled forms :).

Contributor

hiddewie commented Aug 21, 2017

@PhilETaylor See PR #21751. It has been open for quite some time now. Any reactions/improvements are welcome. I hope the PR can be merged soon so any Symfony + Bootstrap 4 projects start experimenting with the beta including some nice automatically styled forms :).

@ReSpawN

This comment has been minimized.

Show comment
Hide comment
@ReSpawN

ReSpawN Aug 23, 2017

We're currently developing a narrowcasting solution with Symfony 3.3.6 and Boostrap 4 beta, and yes, the form styles are currently completely messed up due to all the changes. I'm eagerly looking forward to stable support. Supporting a beta however normally isn't something I would do, but Bootstrap has proven time and time again to be one of the most stable of frontend framework solutions, mainly taking CSS.
How far along is your PR @hiddewie ? I might implement yours before week end.

ReSpawN commented Aug 23, 2017

We're currently developing a narrowcasting solution with Symfony 3.3.6 and Boostrap 4 beta, and yes, the form styles are currently completely messed up due to all the changes. I'm eagerly looking forward to stable support. Supporting a beta however normally isn't something I would do, but Bootstrap has proven time and time again to be one of the most stable of frontend framework solutions, mainly taking CSS.
How far along is your PR @hiddewie ? I might implement yours before week end.

@hiddewie

This comment has been minimized.

Show comment
Hide comment
@hiddewie

hiddewie Aug 23, 2017

Contributor

@ReSpawN Thank you for the interest.

The PR should be very functional for the BS 4 beta. I am using it in small personal projects myself, but I have not seen it implemented in large scale projects. The only thing that I was able to determine which does not work is a form widget with invalid state and invalid text for (sets of) radio buttons and checkboxes. I've raised this issuse with the Bootstrap team (twbs/bootstrap#23426).

Contributor

hiddewie commented Aug 23, 2017

@ReSpawN Thank you for the interest.

The PR should be very functional for the BS 4 beta. I am using it in small personal projects myself, but I have not seen it implemented in large scale projects. The only thing that I was able to determine which does not work is a form widget with invalid state and invalid text for (sets of) radio buttons and checkboxes. I've raised this issuse with the Bootstrap team (twbs/bootstrap#23426).

fabpot added a commit that referenced this issue Oct 1, 2017

feature #21751 Bootstrap4 support for Twig form theme (hiddewie, javi…
…ereguiluz)

This PR was merged into the 3.4 branch.

Discussion
----------

Bootstrap4 support for Twig form theme

**This PR is a followup from #19648. That PR was closed because GitHub thought my branch contained no commits after a force push...**

| Q | A |
| --- | --- |
| Branch? | master |
| Bug fix? | no |
| New feature? | yes |
| BC breaks? | no |
| Deprecations? | no |
| Tests pass? | yes |
| Fixed tickets | #16289 |
| License | MIT |
| Doc PR | - |

I have made a port of the Twig form theming code for Bootstrap 3 to the α-5 version of Bootstrap 4.
- The (inheritance) structure of the form theming files has changed because a number of blocks are the same between BS 3 and 4. They have been migrated to `bootstrap_base_layout.html.twig`.
  The new tree is as follows:

```
bootstrap_base_layout.html.twig
|-- bootstrap_3_layout.html.twig
|   `-- bootstrap_3_horizontal_layout.html.twig
`-- bootstrap_4_layout.html.twig
    `-- bootstrap_4_horizontal_layout.html.twig
```
- Any occurances of `.form-horizontal` have been removed from the BS 4 code.
- Checkboxes and radio buttons have been stacked using the `.form-check`, `.form-check-label` and `.form-check-input` classes. There is now no distinction between checkboxes and radio buttons in the markdown.
- All layout tests have been added and updated for BS4. The inheritance tree is as follows:

```
AbstractLayoutTest
`-- AbstractBootstrap3LayoutTest
    |-- AbstractBootstrap3HorizontalLayoutTest
    `-- AbstractBootstrap4LayoutTest
        `-- AbstractBootstrap4HorizontalLayoutTest
```

All tests pass. The classes `FormExtensionBootstrap4LayoutTest` and `FormExtensionBootstrap4HorizontalLayoutTest` have been created similarly to the BS 3 versions.
- ~~The label coloring on an validation is not correct. I've made an issue (twbs/bootstrap#20535) of the problem.~~
- No [custom form elements](http://v4-alpha.getbootstrap.com/components/forms/#custom-forms) have been used.
- A docs PR can be created if this PR is accepted.
- The new code might have to be updated if large changes occur in the BS 4 α.

Screenshot of BS3 and 4 comparison for the same form:

![1](https://cloud.githubusercontent.com/assets/1073881/17732594/dfcb50d6-6472-11e6-8e96-c46987809322.PNG)

Commits
-------

f12e588 Removed unneeded wrapping quotes around a Twig key
709f134 Removed unneeded wrapping quotes around a Twig key
4222d54 Initial commit for Bootstrap 4 form theme, based on Bootstrap 3 form theme

@fabpot fabpot closed this Oct 1, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment