format form elements in cakephp3 - html

Question

How do I align where the form element box appears as I want at a minimum each input box to right align, have the same font etc. I tried using templating but in the end I had no idea what it was talking about.
https://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses
echo $this->Form->input('first_name',['label' => 'Tutor FirstName']);
echo $this->Form->input('last_name',['label' => 'Tutor LastName']);
echo $this->Form->input('email', ['label' => 'Email']);
echo $this->Form->input('mobile', ['label' => 'Mobile']);
echo $this->Form->input('home_phone',['label' => 'Home Phone']);
echo $this->Form->input('work_phone',['label' => 'Work Phone']);

Answer 1

For templating it's work like that.
In src/Controller/AppController or where you're need it
class AppController extends Controller
{
public $helpers = [
'Form' => [
'templates' => 'template_forms',
],
];
In src/config
Create a new file "template_forms.php"
<?php
$config = [
'checkboxFormGroup' => '<div class="col-xs-5"><div class="checkbox">{{label}}</div></div>',
'checkbox' => '<input type="checkbox" value="{{value}}" {{attrs}}>',
'checkboxWrapper' => '<div class="form-group"><div class="col-sm-offset-5 col-xs-7">{{label}} {{input}}</div></div>',
'inputContainer' => '<div class="form-group" {{required}} >{{content}}</div><div class="hr-line-dashed"></div>',
'input' => '<div class="col-xs-7 col-sm-10 col-lg-10"><input class="form-control input-sm" type="{{type}}" name="{{name}}" {{attrs}}></div>',
'label' => '<label {{attrs}} class="col-xs-5 col-sm-2 col-lg-2 control-label">{{text}}</label>',
'select' => '<div class="col-xs-7 col-sm-10 col-lg-10"><select class="form-control input-sm" {{attrs}} name={{name}}>{{content}}<select></div>',
'error' => '<p class="text-danger">{{content}}</p>',
'textarea' => '<div class="col-xs-7 col-sm-10 col-lg-10"><textarea class="form-control input-sm" name="{{name}}" {{attrs}}>{{value}}</textarea></div>',
'button' => '<div class="form-group"><div class="col-md-12 col-xs-12 col-sm-12 text-center"><button {{attrs}} type="submit">{{text}}</button></div></div>',
'inputContainerError' => '<div class="form-group has-error" {{required}}>{{content}}</div>{{error}}',
];
?>
This will overide all your forms in your app.