I am building a theme for my Drupal 8 site and I want to create a custom profile page with user information like this: http://bootsnipp.com/snippets/featured/profile-card but I can't find the correct template to override where I can have access to all the information needed like username, name, picture and for example his address. Also I can't find where is the user-edit form to change the HTML so I can display it as I want.

I am new to Drupal 8 theming and that's why my question may look kind of no sense. Thank you

EDIT (add more information)

So, I want to make my user's profile edit page to a two column layout where I can have the user base information like name and picture on left and on the right having the form to change the rest of the information like user and password. What is the best way to achieve that?

  • Forms don't tend to have individual templates (they can do but it's not the norm), as the elements in the render array can each be rendered independently of both the form and the other elements contained in it. It might be better to focus the question more precisely on what you want to change in the markup, so people can advise whether you'd be better off using a full form template, individual element templates, or other approaches (e.g. applying wrappers to certain elements etc)
    – Clive
    Commented Apr 6, 2017 at 17:50
  • Whichever way you decide to go, hook_form_alter() will probably be your starting point
    – Clive
    Commented Apr 6, 2017 at 17:53
  • I understand. I changed my question so it can explain what I want to do and I want to know how to achieve that Commented Apr 6, 2017 at 17:53
  • 1
    Thanks that clears it up. I'd be tempted to do something quick like implement hook_form_alter(), change the #weights of elements so they're coming out in the desired order, then add '#prefix' => '<div class="col-md-6">' to the 2 elements that should appear first in their respective columns, and '#suffix' => '</div>' to the 2 elements that close each column. You might need further wrappers on the very first and very last elements too (e.g. with a class of "row" if your CSS needs it), those can just go in the first and last elements' #prefix and #suffix
    – Clive
    Commented Apr 6, 2017 at 18:01
  • Sorry, Clive. I didn't understood a thing.. I have no experience with this logic, can you give me a good tutorial to follow on or try to explain it better? Thank you! Commented Apr 6, 2017 at 19:58

2 Answers 2


use the native interface to add fields and change display



if the html structure need to be changed , the template


can be override in the theme child templates folder.

As an exmaple for custom added individual fields, with fundation classes :

<article{{ attributes }}>
  {% if content %}
    <div class="grid-x grid-margin-x">
      <div class="cell small-12 medium-6 large-3">
        {{ content.field_user_photo }}
      <div class="cell small-12 medium-6 large-9">
        {{ content.field_user_name }}
        {{ content.field_user_status }}
        {{ content.field_user_email }}
        {{ content.field_user_phone }}        
  {% endif %}

Enable Twig in services.yml. No you can see the active template in the html-code

  • I have twig enabled and I have a lot of templates but none has the html I need to change.. that is my problem Commented Apr 6, 2017 at 17:33
  • Very unclear how to do this.
    – Justme
    Commented Aug 16, 2018 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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