how to render symfony4 forms with same classes as symfony3? - css

Question

In symfony 3 the forms were rendered with the classes "control-label" for the label element and "form-control" for the input element, and both wrapped in a div with the class "form-group" like this:
<div class="form-group">
<label class="control-label" for="hazardlogbundle_acrgroup_serial">Serial</label>
<input type="number" id="hazardlogbundle_acrgroup_serial" name="hazardlogbundle_acrgroup[serial]" class="form-control">
</div>
In symfony4 however, all three of these classes have been omitted, the same form now looks like this:
<div>
<label for="hazardlogbundle_acrgroup_name" class="required control-label">Grupp (ATS) namn</label>
<input type="text" id="hazardlogbundle_acrgroup_name" name="hazardlogbundle_acrgroup[name]" required="required" class="form-control">
</div>
I happened to use these three classes (or actually, bootstrap did) for my css styling 😇 Is there an easy way of getting these back?
To get the form-control on the actual input I can use:
$builder->add('name', TextType::class, array('label' => 'Grupp (ATS) namn', 'attr' => array('class' => 'form-control')));
But that doesn't solve the problem for the wrapping div or the label itself... I understand I can go and create custom twig templates for each and every form, but no thank you 😎

Answer 1

You can assign "themes" to the Symfony Forms. There are already themes from Symfony for Bootstrap 3,4 and 5. For that you need to specify the theme in the config file of twig. (config/packages/twig.yaml)
For bootstrap 3:
twig:
form_themes: ['bootstrap_3_layout.html.twig']
For bootstrap 4:
twig:
form_themes: ['bootstrap_4_layout.html.twig']
In Symfony 4 there seems to be no predefined theme for bootstrap 5 yet.
You can read more here: https://symfony.com/doc/4.3/form/form_themes.html