How to align a button vertically in a row

Navigation
0

I am not able to align a button vertically within a row. I've tried to insert a label to force it down, but it does not even move. 

  input[type="text"], select {
        /*font-size: 13px;*/
    }
    
    .selectClass {
        /*font-size: 13px;*/
    }
    
    label {
        /*font-size: 13px;*/
        /*color:#808080;*/
    }
    
    form label {
        font-weight:normal;
    }
    
    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;
    }
    
    textarea:focus {
        background-color: lightblue;
        color: black;
    }
    
    /*.distanciaForms div[class^="col-"] {*/
        /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
    /*}*/
    
    .form-group {
        margin-bottom: 1% !important;
    }
<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-2">
                <button class="btn btn-primary form-control" id="btn-add-contato">Novo contato</button>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-contatos">
                <div class="row">
                        <div class="col-md-2">
                            <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
                            <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                        </div>
                        <div class="col-md-4">
                            <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
                            <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">&nbsp;</label>
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked
                                       autocomplete="off" />
                                <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label name="PessoaContatoViewModel[0].Detalhes" class="control-label">Detalhes</label>
                            <textarea name="PessoaContatoViewModel[0].Detalhes" class="form-control" />
                        </div>
                        <div class="col-md-1">
                            <label class="control-label">&nbsp;</label>
                            <button class="btn btn-danger btn-remover-contato">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

Is there a way to align it vertically easily?

    
asked by anonymous 28.08.2018 / 02:58

1 answer

0

Since BS3 would already align automatically, you should be using BS4. Add the align-items-center class in the parent div of the fields: 

<div class="row align-items-center">

Because BS4 works with flexbox, it will align elements in the center vertically. And you do not need the% empty% you put. 

input[type="text"], select {
        /*font-size: 13px;*/
    }
    
    .selectClass {
        /*font-size: 13px;*/
    }
    
    label {
        /*font-size: 13px;*/
        /*color:#808080;*/
    }
    
    form label {
        font-weight:normal;
    }
    
    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;
    }
    
    textarea:focus {
        background-color: lightblue;
        color: black;
    }
    
    /*.distanciaForms div[class^="col-"] {*/
        /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
    /*}*/
    
    .form-group {
        margin-bottom: 1% !important;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-2">
                <button class="btn btn-primary form-control" id="btn-add-contato">Novo contato</button>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-contatos">
                <div class="row align-items-center">
                        <div class="col-md-2">
                            <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
                            <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                        </div>
                        <div class="col-md-4">
                            <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
                            <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">&nbsp;</label>
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked autocomplete="off" />
                                <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label name="PessoaContatoViewModel[0].Detalhes" class="control-label">Detalhes</label>
                            <textarea name="PessoaContatoViewModel[0].Detalhes" class="form-control"></textarea>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-danger btn-remover-contato alinha-vert">
                                <span class="glyphicon glyphicon-trash">Lixo</span>
                            </button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
    
28.08.2018 / 04:05
Fail: Auth Firebase (FCM) Java Sort array of objects relative to each other