Align inputs and reduce spacing between Abels using CSS

Question

I’m not getting my line Labels and reduce vertical spacings between Labels and the inputs. Some are adjusting and some are not. I would like to reduce the vertical/horizontal spacing that distances the fields to better take advantage of the screen space. Someone knows 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 is like this:

And by removing the spacing, I’d like to get a result like this:

Answer 1

Your HTML was in trouble, you write the name of the class outside the class=" " should look like this class="control-label"

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

There are other fields of your form that would be good to review. Here is the official documentation: https://getbootstrap.com/docs/3.3/css/#Forms

Look how low it got:

    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>

Answer 2

If you are using bootstrap, just replace the label with span. Then put a style="margin-top:0px". At least for me it worked.