Align form items with CSS

Question

Hello, I would like a help to align the items in the following form. I would like the selects Labels to stand above them to the example of inputs Labels. Additionally he would like the selects, imputs and buttons to be aligned at the bottom of the div. I thank anyone who can help me because although I tried to research I could not do.

<form class="form-inline" method="POST" action="../views/menu.php?pag=finalizados">

                <div class="form-group">
                    <div id="aposta_filtro">

                        <div class="form-group form-group-jogo">
                            <label for="regional_aposta">Regional</label>
                            <select class="form-control" id="regional_aposta" name="ra">
                                <?php preenche_reg_combo(); ?>
                            </select>
                        </div>

                        <div class="form-group form-group-jogo">
                            <label for="regional_aposta">Cambista</label>
                            <select class="form-control" id="regional_aposta" name="ra">
                                <?php preenche_cambista_combo(); ?>
                            </select>
                        </div>

                        <div class="form-group form-group-jogo">
                            <label for="filtroInicial">Data Inicial</label>
                            <input type="text" class="form-control js_date" 
                                   id="filtroInicial"
                                   required="true"
                                   name="data_inicial" 
                                   value="
                                   <?php 
                                        if(isset($di))
                                        {
                                            echo date("d/m/Y", strtotime($di));
                                        }
                                        else
                                   ?>"
                            >
                        </div>
                        <div class="form-group form-group-jogo">
                            <label for="filtroFinal">Data Final</label>
                            <input type="text" class="form-control js_date" 
                                   id="filtroFinal" 
                                   required="true"
                                   name="data_final" 
                                   value="
                                   <?php 
                                        if(isset($df))
                                        {
                                            echo date("d/m/Y", strtotime($df));
                                        }
                                   ?>"
                            >
                        </div>
                        <button id="submitDataFiltro" type="submit" class="btn btn-primary" 
                                title="Filtrar">
                            Filtrar <span class="fa fa-filter"></span>
                        </button>
                        <br>
                    </div>
                </div>
            </form>

Answer 1

To put the label above the buttons: you must REMOVE the class 'class="form-inline"', and then assemble grid (adding <div class="row"> .... </row>) and defining the width of each field (.col-??-??).

Read more on:

• Bootstrap Forms.
• Boostrap grid system

To align the fields to BASE: one way is to use the CSS:

.form-group{
  float: none;
    display: table-cell;
    vertical-align: bottom;
}

See on Jsfiddle an example working (resize the display width)