Align form items with CSS

3

Hello, I would like some help to align the items in the following form. I would like the labels of the selects to be above the same as the labels of the inputs. Additionally I would like the selects, the imputs and the buttons to be aligned in the bottom of the div. Thanks to anyone who can help me because although I tried to search I could not do it.

<formclass="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>
    
asked by anonymous 22.08.2016 / 18:18

1 answer

3

To put the caption above the buttons: you should REMOVE the class ' class="form-inline" ', and then mount a grid (by adding <div class="row"> .... </row> ) and setting the width of each field ( .col-??-?? ).

Read more at:

To put the fields in line with BASE: One way is to use CSS:

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

See JsFiddle a working example (resize view width)

    
22.08.2016 / 18:50