Combine 2 fields in one div with Twig

Question

I have three templates

1. field--field-custom.html.twig
2. field--field-custom1.html.twig
3. field--field-image.html.twig

I also have a teaser template containing all three fields like that:

<div{{ content_attributes.addClass('node__content', 'container') }}>
    {{ content }}
</div>

I want to have the first two templates in a bootstrap div, for example

col-sm-6

and the third template in the other div

col-sm-6

If I include the second template in the first template file it just repeats the field instead of rendering the intended field (both templates are name suggestions of the same file). What can I do in order to have both fields in the same template file?

Answer 1

Just chunk the output by using the field names:

<div class=“col-6-sm”>{{ content.field_custom }} {{ content.field_custom1 }}</div>

Then do the same for the remaining field.

Answer 2

<div{{ content_attributes.addClass('node__content', 'container', 'col-sm-6') }}>
    {{ content.field_imagen }}
  </div>
  <div{{ content_attributes.addClass('node__content', 'container', 'col-sm-6') }}>
    {{ content.field_resumen }}
    {{ content.field_leer_mas }}
  </div>

Thanks to Kevin!