Aligning inputs and reducing label spacing using CSS

Navigation
0

I am not able to align my labels and reduce the vertical spacing between labels and inputs . Some are adjusting and some are not. I would like to reduce the vertical / horizontal spacing that distances the fields to make better use of screen space. Does anyone know how to help me?

css 

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    /*border: 1px solid #555;*/
    outline: none;
}


input[type=text]:focus {
    background-color: lightblue;
    color:black;
}

html 

<div class="form-horizontal">
<div class="form-group row">
    <div class="col-md-2">
        <label  class="control-label">Natureza</label>
        <select id="pessoaNatureza" data-modal=""  data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
        <span  class="text-danger"></span>
    </div>
    <div class="col-md-4">
        <label  control-label">Data de Inclusão</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon wb-calendar" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txtDataInclusao" class="form-control" data-multidate="true" data-plugin="datepicker" disabled />
        </div>
        <span class="text-danger"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-6">
        <label  control-label">Razão Social</label>
        <input  class="form-control text-uppercase" />
        <span  class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <label  control-label">Nome Fantasia</label>
        <input class="form-control text-uppercase" />
        <span  class="text-danger"></span>
    </div>
</div>
<div class="form-group row">

    <div class="col-md-4">
        <label control-label">Abertura</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon wb-calendar" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txtDataAbertura" class="form-control" data-multidate="true" data-plugin="datepicker" />
        </div>
        <span class="text-danger"></span>
    </div>
    <div class="col-md-5">
        <label class="control-label">Regime Tributário</label>
        <select data-plugin="selectpicker" title="Selecione uma opção" class="form-control selectClass show-tick show-menu-arrow"></select>
        <span class="text-danger"></span>
    </div>

</div>

Currently my screen looks like this:

Andremovingthespacing,I'dliketogetaresultlikethis:

    
asked by anonymous 31.07.2018 / 11:45

1 answer

0

Your HTML had a problem, you write the name of the class out of class=" " should be class="control-label"

On the spacing between the inputs you will need to tinker with the original value of the Bootstrap Grid padding responsible for this. I created a class .meuform div[class^="col-"] { } and did this treatment, but I do not recommend changing the original Grid spacing ...

There are other fields in your form that you should check. Here's the official documentation: link

See how it looks below: 

    input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            /*border: 1px solid #555;*/
            outline: none;
        }
        
        
        input[type=text]:focus {
            background-color: lightblue;
            color:black;
        }
        .meuform div[class^="col-"] {
            padding: calc(15px / 2); /* calcula a distancia entro um inpute e outro e os cantos da tela*/
        }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    
    <div class="container-fluid">
        <div class="form-horizontal meuform">
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="PessoaNatureza" class="control-label">Natureza</label>
                    <select id="pessoaNatureza" data-modal="" asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                    <span asp-validation-for="PessoaNatureza" class="text-danger"></span>
                </div>
                <div class="col-md-4">
                    <label asp-for="PessoaFisicaViewModel.DataNascimento" class="control-label">Data de Inclusão</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="icon wb-calendar" aria-hidden="true"></i>
                            </span>
                        </div>
                        <input id="txtDataInclusao" asp-for="PessoaFisicaViewModel.DataNascimento"  class="form-control" data-multidate="true" data-plugin="datepicker" disabled />
                    </div>
                    <span asp-validation-for="PessoaFisicaViewModel.DataNascimento" class="text-danger"></span>
                </div>
            </div>
             <div class="form-group row">
                <div class="col-md-6">
                    <label asp-for="PessoaJuridicaViewModel.RazaoSocial" class="control-label">Razão Social</label>
                    <input asp-for="PessoaJuridicaViewModel.RazaoSocial" class="form-control text-uppercase" />
                    <span asp-validation-for="PessoaJuridicaViewModel.RazaoSocial" class="text-danger"></span>
                </div>
                <div class="col-md-6">
                    <label asp-for="PessoaJuridicaViewModel.NomeFantasia" class="control-label">Nome Fantasia</label>
                    <input asp-for="PessoaJuridicaViewModel.NomeFantasia" class="form-control text-uppercase" />
                    <span asp-validation-for="PessoaJuridicaViewModel.NomeFantasia" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
        
                <div class="col-md-4">
                    <label asp-for="PessoaJuridicaViewModel.DataAbertura" class="control-label">Abertura</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="icon wb-calendar" aria-hidden="true"></i>
                            </span>
                        </div>
                        <input id="txtDataAbertura" asp-for="PessoaJuridicaViewModel.DataAbertura" class="form-control" data-multidate="true" data-plugin="datepicker" />
                    </div>
                    <span asp-validation-for="PessoaJuridicaViewModel.DataAbertura" class="text-danger"></span>
                </div>
                <div class="col-md-5">
                    <label asp-for="PessoaJuridicaViewModel.RegimeTributario" class="control-label">Regime Tributário</label>
                    <select asp-for="PessoaJuridicaViewModel.RegimeTributario" asp-items="Model.PessoaJuridicaViewModel.RegimesTributarios" data-plugin="selectpicker" title="Selecione uma opção" class="form-control selectClass show-tick show-menu-arrow"></select>
                    <span asp-validation-for="PessoaJuridicaViewModel.RegimeTributario" class="text-danger"></span>
                </div>
        
            </div>
        </div>
    </div>
    
31.07.2018 / 14:49
Problems with Stored Procedures in Laravel 5.6? Reuse function variables