Creating a Horizontal form with Braincrafted Bootstrap - symfony

Question

I'm trying to create a Twitter Bootstrap based horizontal form using Symfony and the Braincrafted Bootstrap module. I've copied the example from the docs however my form is not rendering correctly
My code is as follows
class MyController extends Controller {
/**
* #Route("/")
* #Method("GET")
* #Template
*/
public function someAction() {
$form = $this->createForm(new HorizontalFormType());
return array("horizontalForm" => $form->createView());
}
}
This class is taken from the docs:
class HorizontalFormType extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder->add('email', 'text', array(
'label' => 'Email',
'attr' => array('placeholder' => 'Email')
));
$builder->add('password', 'password', array(
'label' => 'Password',
'attr' => array('placeholder' => 'Password')
));
$builder->add('checkbox', 'checkbox', array('label' => 'Remember me'));
}
public function getName() {
return 'horizontal_form';
}
}
The template code is copied as well
<form class="form-horizontal">
<legend>Legend</legend>
{{ form_widget(horizontalForm, {'form_type': 'horizontal'}) }}
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
The resulting HTML for the form is
<form class="form-horizontal ng-pristine ng-valid">
<legend>Legend</legend>
<div id="horizontal_form">
<div>
<label class="required" for="horizontal_form_email">Email</label>
<input type="text" placeholder="Email" required="required" name="horizontal_form[email]" id="horizontal_form_email">
</div>
<div>
<label class="required" for="horizontal_form_password">Password</label>
<input type="password" placeholder="Password" required="required" name="horizontal_form[password]" id="horizontal_form_password">
</div>
<div>
<label class="required" for="horizontal_form_checkbox">Remember me</label><input type="checkbox" value="1" required="required" name="horizontal_form[checkbox]" id="horizontal_form_checkbox">
</div>
<input type="hidden" value="fea7c498a01aebd814baf4a9f57df4b6e3646195" name="horizontal_form[_token]" id="horizontal_form__token">
</div>
<div class="control-group">
<div class="controls">
<button class="btn" type="submit">Sign in</button>
</div>
</div>
</form>
Note I'm also using AngularJS in my project (hence why the ng directives are added to the form's class list).
What have I missed?

Answer 1

As described in the Getting Started guide in the "Form Theme" section, I had to manually configure Symfony to use the Braincrafted form template. It did not unfortunately automatically work.
twig:
form:
resources:
- "BraincraftedBootstrapBundle:Form:form_div_layout.html.twig"

Answer 2

For braincrafted-bootstrap up to v1.4, to make any form horizontal from within a twig,
{{ form(form, {'form_type': 'horizontal', 'attr': {'class': 'form-horizontal'}}) }}
"form-type" tells BC_Bootstrap to add the control groups for you, and the attr: class: then tells bootstrap css to apply the horizontal style. You need to have both of these applied.
This means that you don't need to extend any horizontal formTypes, nor break the form out into widgets et al in order to set the class. Just apply the form_type and class in the twig as above.

Answer 3

You must Wrap labels and controls in .control-group
All labels must have class .control-label.Input fields must be wrapped with div class="controls". The html output should be like this
<form class="bs-docs-example form-horizontal">
<legend>Legend</legend>
<div id="horizontal_form">
<div class="control-group">
<label for="horizontal_form_email" class="required control-label">Email</label>
<div class="controls">
<input type="text" id="horizontal_form_email" name="horizontal_form[email]" required="required" placeholder="Email">
</div>
</div>
<div class="control-group">
<label for="horizontal_form_password" class="required control-label">Password</label>
<div class="controls">
<input type="password" id="horizontal_form_password" name="horizontal_form[password]" required="required" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label for="horizontal_form_checkbox" class="checkbox required">
<input type="checkbox" id="horizontal_form_checkbox" name="horizontal_form[checkbox]" required="required" value="1"> Remember me
</label>
</div>
</div>
<input type="hidden" id="horizontal_form__token" name="horizontal_form[_token]" value="def76ca43f623d0a4ad8145e39f33907b7e9e0a1"></div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>