Symfony News

New in Symfony 4.1: Improved Bootstrap 4 form theme

Tobias Nyholm Mathieu Piot

Contributed by
Tobias Nyholm and Mathieu Piot
in #26327, #26326, #26325, and #25715.

In Symfony 2.6 we added a Bootstrap theme for Symfony Forms to easily style all your forms based on Bootstrap, the most popular design framework. In Symfony 3.4 we updated the form theme for Bootstrap 4, which was still a beta version at that time.

Now that the stable version of Bootstrap 4 has been released, in Symfony 4.1 we've updated the form theme again for the latest Bootstrap changes and we've improved it with additional features.

Accessibility

Web accessibility is essential to create inclusive apps and services, and it's an integral part of our Symfony Diversity initiative. With much help from an accessibility expert, Sandra, we have made the Bootstrap 4 from theme compliant with the WCAG 2.0 standard.

The standard includes rules and guidelines to make content accessible for users with disabilities, including impaired vision, learning disabilities, limited movement and learning disabilities.

Custom forms

The form theme now supports Bootstrap 4 custom forms, which allow to replace the default browser form elements.

Labels and Errors

In addition to minor tweaks and fixes, form errors are now 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.

Documentation

We're working on a new documentation article about Bootstrap 4 and Symfony. You can check the current proposal and suggest improvements or new contents.

How does it look

This is how the improved Bootstrap 4 form theme looks:

And this is how it looks when the form displays error messages:


Be trained by Symfony experts - 2018-03-12 Cologne - 2018-03-19 Clichy - 2018-03-19 Clichy


About us

What a Symfony developer should know about the framework: News, Jobs, Tweets, Events, Videos,...

Resources

Find us on Twitter

Find us on Facebook