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>

check form_div_layout.html.twig in twig you might edit it there — Viscocent
– Viscocent, Commented May 13, 2014 at 14:20
And If You dont want to override form functions You can render all parts separately by using form_ functions symfony.com/doc/current/reference/forms/twig_reference.html — kskaradzinski
– kskaradzinski, Commented May 13, 2014 at 14:27
oki thank you but i don't have time to change twig templates, so i prefer to change only in my own templates because it's easy for me, if there's another documentation please provide it to me — user1655410
– user1655410, Commented May 13, 2014 at 14:30

Sehael · Accepted Answer · 2014-05-13 15:17:00Z

4

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>

edited May 13, 2014 at 15:17

answered May 13, 2014 at 14:44

Sehael

3,7361 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1655410 Over a year ago

the problem is it still give the old edit button before the custom bootstrap edit button

Sehael Over a year ago

are you rendering the button from twig as well? I just added an example to add a class to a button rendered in twig

Collectives™ on Stack Overflow

Customizing Symfony 2 form with bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related