Struggling with a bootstrap template, I found it difficult to adjust the size and alignment of labels and input fields. Here are images showing what I currently have and what I aim for. Despite checking out the grid system documentation at here, I couldn't grasp it.
Current Layout:
https://i.sstatic.net/xShOE.jpg
Desired Layout: https://i.sstatic.net/1aBBv.png
Below is the code snippet used:
<div class="container fluid custom-locale-form">
<div class="form-group row">
<label for="numeroTelephone" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Information</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
</div>
</div>
<div class="form-group row">
<label for="numeroTelephone" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Phone Number</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
{{ form_widget(form.numeroTelephone, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group row">
<label for="numeroFax" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Fax Number</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
{{ form_widget(form.numeroFax, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group row">
<label for="email" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Email</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
{{ form_widget(form.email, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Website</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
{{ form_widget(form.siteWeb, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
</div>