I am fairly new to Drupal and I want to change the "add article" form a bit. Currently I have the following displayed:

enter image description here

I want to wrap these <input> fields in a few <div> so that I can apply bootstrap to it. I don't exactly how to do this, so I tried to alter the .twig files that are being called. For example MY_THEME/templates/form/input.html.twig. However all I can see is an <input> calling {{ children }}

enter image description here

If I place this in a div, it just wraps the whole form in this div. Is there a way to place the individual <input> fields in separate divs so that I can apply bootstrap to it?


The way you are suggesting works fine. (I just tested it). Try to clear your cache and hard refresh the page. If you do:

<div class="my_custom_class"><input{{ attributes }} />{{ children }}</div> 

you will have your form inputs wrapped in that div.

The other options is to use the form-element.html.twig or you can use the hook_form_alter and add prefix and suffix to your fields.

  • Thanks, I will try that. Also, I noticed my changes are applied to ALL forms on my site. I also have a login form which seems to be affected by these changes. Is there a way to only edit a specific form?
    – Rubenxfd
    Sep 28 '17 at 9:08
  • If you want to change your twig file and apply it to specific elements you need to specify the name of the file according to your form. Have a look at this post drupal.stackexchange.com/questions/237461/…. If you go with the hook_form_alter option, you just need to check the form_id and apply prefix and suffix only to the fields of the specific form.
    – Ismini
    Sep 28 '17 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.