(Meteor) Customizing field layout in useraccounts:semantic-ui with the use of aldeed:template-extension

custom-fields.js

// Adding some simplistic fields
AccountsTemplates.addFields([
  {
    _id: "address",
    type: "text",
    
    // Options object with custom properties for my layout
    options: {
      // Put a divider before this field
      dividerBefore: true
    }
  },

  {
    _id: "zipcode",
    type: "text",
    
    options: {
      // Make this field the first in a row of fields
      startRow: true
    }
  },

  {
    _id: "city",
    type: "text",
    
    options: {
      // End the row with this field
      endRow: true
    }
  }
]);

group-fields.html

<template name="appAtGroupFields">
  {{#each fields}}
    {{#if options.dividerBefore}}<hr>{{/if}}

    <!-- Collect grouped fields, possibly outputting nothing until the group is ended -->
    {{#with collectFields this}}
      {{#if isArray this}}
        <!-- Group container -->
        <div class="{{numberToWord this.length}} fields">
          {{#each this}}
            {{> atInput}}
          {{/each}}
        </div>
      {{else}}
        {{> atInput}}
      {{/if}}
    {{/with}}
  {{/each}}
</template>

group-fields.js

// https://github.com/aldeed/meteor-template-extension
Template.appAtGroupFields.inheritsHelpersFrom("atPwdForm");

Template.appAtGroupFields.helpers({
  collectFields: function (field) {
    var instance = Template.instance(),
        current_row = instance.current_row;

    if (field.options && field.options.startRow) {
      instance.current_row = [field];
    }
    else if (field.options && field.options.endRow) {
      delete instance.current_row;

      current_row.push(field);
      return current_row;
    }
    else if (current_row) {
      current_row.push(field);
    }
    else {
      return field;
    }
  },

  numberToWord: function (number) {
    return number_words[number];
  },

  isArray: _.isArray
});


var number_words = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine",
  "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen"];

pwd-form.html

<!-- atPwdForm slightly edited -->
<template name="appAtPwdForm">
  <div class="at-pwd-form">
    <form id="at-pwd-form" action="#" method="POST" novalidate>
      <!-- Moved the iteration to appAtGroupFields -->
      {{> appAtGroupFields}}

      {{#if showForgotPasswordLink}}
        {{> atPwdLink}}
      {{/if}}

      {{> atPwdFormBtn}}
    </form>
  </div>
</template>

pwd-form.js

// https://github.com/aldeed/meteor-template-extension
Template.appAtPwdForm.replaces("atPwdForm");

screenshot.png

You wouldn't happen to know best way of doing this in bootstrap? -- want a row into two columns... having issues.. .