Set up a collection using bootstrap

Question

I have a set of inline form.

I would like to customize the inline form.

I want each inline form entry to be in 1 line, something like this:

    <div class="row">
        <div class="col-sm-6">field1</div>
        <div class="col-sm-6">field2</div>
    </div>

But symfony doc , in my opinion, is bad for this.

I have a form ApplicationType:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('responsables', 'collection', array(
            'label' => ' ',
            'type' => new ApplicationResponsablesType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' =>false
        ))
        //...

And ApplicationResponsablesType:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('type', null, array(
            'required' => true,
        ))
        ->add('id')
    ;

I really don't understand how to use {% block ___ %}.

my Application new.html.twig, where I have a form:

{% block body -%}
<div class="container">
    <br>

    {{ form_start(form) }}
         {# some other fields #}
         {{ form_row(form.responsables) }}
         {# some other fields #}

         <div class="pull-right">
            {{ form_row(form.submit) }}
         </div>
    {{ form_end(form) }}

{# ... closing block and tags... #}

I tried something, but since I didn’t understand how it works and what I really tried, I won’t become it ...

Can someone help me or guide me? Thank!

Edit:

As you can see in this image:

. Responsable, . Type Uid .

( , , )

Answer 1

, Symfony doc . :

• prototype_layout.html.twig:

  {% block _application_responsables_entry_row %}
      <div class="row">
          <div class="col-sm-6">{{ form_row(form.type) }}</div>
          <div class="col-sm-6">{{ form_row(form.id) }}</div>
      </div>
  {% endblock %}
  

. _application, ApplicationType, _responsables, , , . _entry_row, .

, , DOM select html, , .

• config.yml:

  twig:
      form_themes:
          - 'AppBundle:Form:prototype_layout.html.twig' #adapt this path if you saved your file elsewhere
  

• ( new.html.twig):

{% use "AppBundle:Form:prototype_layout.html.twig" %}

Answer 2

Inline .

CSS.

:

https://codeshare.io/GbQPkA, CSS.

CSS , .

CSS

div[id*="mybundle_application_responsables_"]{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
div[id*="mybundle_application_responsables_"] > .form-group {
    flex-grow: 1;
    width: 100%;
    padding: 10px;
}

, . , CSS .

---

.