Override user login form template

Question

I'm trying to customize my user login page in my custom theme using the template file page--user--login.html.twig, but am having issues accessing the different form elements. All aspects of the form are located in page.content, but I'd like to edit the content that's being outputted.

For a simple example, the base theme has Username and Password stacked vertically, where I'd like to adjust this to use bootstrap so that they are stacked horizontally on large screen and vertically on mobile.

In Drupal 7, we had a form element in the template file that allowed me to render certain form elements separately, like:

<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['name']); ?>
</div>
<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['pass']); ?>
</div>

Is there an equivalent for Drupal 8?

I attempted to create a template file for the form (form--user-login.html.twig and form--user-login-form.html.twig) to see if I could alter the form template itself instead of the page the form exists on, but didn't have any luck with that.

I'd prefer to override the current login theme instead of creating a whole new page and form and have to add all the necessary configurations so that a user lands on the correct login page, but have yet to find any way to do so, thanks in advance.

Answer 1

if you overrided correctly element will contain all items in form--user-login.html.twig,

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>

if the template is not valid, you should try to add it.

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {

  if ($hook == 'form' & !empty($variables['element']['#id'])) {
    $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

then create form--user-login-form.html.twig in your theme.

do not forget to clear the cache.

Answer 2

In addition to Yuseferis answer:

I'm using this function to add theme suggestions for forms in Drupal 10:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for form templates.
 * 
 * Make forms themeable:
 * e.g. => form--user-login-form.html.twig
 */
function YOURTHEME_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  if (!empty($variables['element']['#form_id'])) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
  }
}