1
Good evening. On one of the pages of my site, I changed the position of the input fields to be next to the Abels, originally it was like this: http://tratspay.com/app/editar-produto.html . After my modification was like this: http://tratspay.com/app/editar-produto-teste.html but the fields have become misaligned as you can see, I would like to know how to align them.
4
What happens is that by default the label of Bootstrap has a margin-bottom: .5rem;. You have to remove this margin-bottom to the label align with the input correctly as you can see in the image below:
With the standard margin
Removing the slab margin
My suggestion is that you put in label the native class m-0, this class will reset the margin-bottom of label
1
Good afternoon my dear, I could help you a lot you authorize me to send you an improved layout?
This commenting some errors the use of table is no longer good practice for a long time I can help you by showing how your code can get shorter and more responsive, I can help you will require me about 30 minutes?
I ended up doing here very quickly this update I looked at your layout and this structure I did can solve all these problems, analyze and see if it fits you well, besides being in good practice is a little cleaner to see the code itself.
I left the blue background to highlight this property well eh the bg-prymary class of rest can put everything straight that will line up as you intend !
<div class="container bg-primary">
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">ID de Produto:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="123451234">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Key de Integração:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="123445123">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Tipo de Produto:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Produto Físico">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Tipo de de Cobrança:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Produto Físico">
</div>
</div>
<div class="form-group row">
<label for="nomeProduto" class="col-sm-2 font-weight-bold col-form-label">Nome do Produto :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nomeProduto" placeholder="Nome do Produto :">
</div>
</div>
<div class="form-group row">
<label for="descProduto" class="col-sm-2 font-weight-bold col-form-label">Descrição do Produto:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="descProduto" placeholder="Descrição do Produto :">
</div>
</div>
<div class="form-group row">
<label for="emailSuporte" class="col-sm-2 font-weight-bold col-form-label">Email de Suporte :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="emailSuporte" placeholder="Email de Suporte :">
</div>
</div>
<div class="form-group row">
<label for="valor" class="col-sm-2 font-weight-bold col-form-label">Valor</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="valor" placeholder="0,00">
</div>
</div>
<div class="form-group row">
<label for="categoria" class="col-sm-2 font-weight-bold col-form-label">Categoria</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="categoria" placeholder="Categoria">
</div>
</div>
<div class="form-group row">
<label for="qnt_max" class="col-sm-2 font-weight-bold col-form-label">Quantidade Máxima Por Compra :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="qnt_max" placeholder="0,00">
<small>Limite de Produtos que um clliente pode fazer na mesma compra.</small>
</div>
</div>
<div class="form-group row">
<label for="via" class="col-sm-2 font-weight-bold col-form-label">Produto entre via:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="via" placeholder="Produto entre via:">
</div>
</div>
</form>
The layout I sent you will adjust the screen and any resolution you put.
I hope I’ve helped and any kind of doubt call me
Your intention is noble, but that doesn’t answer the question. In addition to but in case he is planning to send this document by email or better control an impression, the most indicated is the same table. Soon you will have some points and you will be able to comment on the questions. Do not use the answer field to make comments.
Oops sorry I ended up doing and sending before I see your comment but I took some care hope I can help hug
The way Henrique explained it worked in parts here, I was able to align the fields but bugged the contents of the tabs, the content of the second tab was mixed with that of the first.
Browser other questions tagged html css html5 css3 bootstrap-4
You are not signed in. Login or sign up in order to post.
Good morning, Hugo. Again, thank you for the strength! Actually the Abels are already the way I want them, what I want to line up are the Forms. I can only edit all at once? Can’t edit each one individually so that everyone is aligned?
– Igor Rosa
@Igorrosa I guess I don’t quite understand what you mean by this alignment you want to line up where exactly? I thought you wanted to align the label vertically with the input....
– hugocsl
I don’t think I can explain it properly. The label with the names are already aligned with the fields beside, however, each field of data insertion is of a different size, leaving a strange aesthetic on the site, I would like to leave these fields of the same size. If you notice on the page I am editing: http://tratspay.com/app/editar-producto-teste.html, you can see what I am trying to explore.
– Igor Rosa