Customizing Symfony 2 form with bootstrap

Question

i have a problem understanding the form component in Symfony 2, first I want to customize my form with some bootstrap classes but the problem is I don't know how, because in the twig template there's only these lines

{% extends 'Bundle::layout.html.twig' %}

{% block content -%}
<div class="panel-heading"> <h3>Category</h3></div>
   <div class="panel-body">

       {{ form(edit_form) }}

          <ul class="record_actions">
         <li>
          <a href="{{ path('category') }}">
            Back to the list
          </a>
         </li>
        <li>{{ form(delete_form) }}</li>
         </ul>
   </div>
{% endblock %}

for instance I want to change the form to something like this using bootstrap

<div class="container">

  <div class="panel panel-default">
    <div class="panel-heading">Category </div>
      <div class="panel-body"> 
       <form class="form-horizontal">

         <div class="form-group">
            <label for="Name" class="control-label col-xs-2"> CategoryName</label>
            <div class="col-xs-6">
                <input type="text" class="form-control" required="" id="Name" placeholder="Category name" >
            </div>
         </div>



         <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Edit</button>
            </div>
         </div>

       </form>

Answer 1

I believe what you are looking for is found in the Symfony docs at Rendering each field manually. So you want to do something like this for your form then:

<div class="panel-body">

   {{ form_start(edit_form  }}

   <div class="form-group">
        {{ form_label(edit_form.categoryName, 'CategoryName', {'label_attr': {'class': 'control-label col-xs-2'}}) }}
        <div class="col-xs-6">
            {{ form_widget(edit_form.categoryName, {'attr': {'class': 'form-control'}})  }}
        </div>
     </div>

     <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">Edit</button>
        </div>
     </div>
  {{ form_end(form) }}
</div>

Or something along these lines. As you can see, you can add classes to the twig rendered forms. for a complete reference of the twig templating functions, see the docs Twig Reference

If you are rendering the button with twig as well, then you could do this:

<div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
        {{ form_widget(form.editButton, {'attr': {'class': 'btn btn-primary'}}) }}
    </div>
 </div>