How can I align Bootstrap form

Question

How can I align Bootstrap form

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I want the form to be well aligned, the create button I want it to be below the dropDownList

This is the code I'm using

<form>
        <div class="form-row">
            <div class="form-group col-md-4">
                <?= $form->field($model, 'Cedula')->textInput() ?>
            </div>
            <div class="form-group col-md-4">            
                <?= $form->field($model, 'Nombre')->textInput(['maxlength' => true]) ?>
            </div>
            <div class="form-group col-md-4">
                <?= $form->field($model, 'Apellido')->textInput(['maxlength' => true]) ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'fechaNacimiento')->widget(
                        DatePicker::className(), [
                    // inline too, not bad
                    'inline' => false,
                    // modify template for custom rendering
                    //'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
                    'clientOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]);
                ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'Municipio_idMunicipio')->dropDownList(
                        ArrayHelper::map(Municipio::find()->all(), 'idMunicipio', 'Nombre'), [ 'prompt' => 'Seleccione un municipio',]);
                ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'Area_idArea')->dropDownList(
                        ArrayHelper::map(Area::find()->all(), 'idArea', 'Nombre'), [ 'prompt' => 'Seleccione un area',]);
                ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'Cargo_idCargo')->dropDownList(
                        ArrayHelper::map(Cargo::find()->all(), 'idCargo', 'Nombre'), [ 'prompt' => 'Seleccione un cargo',]);
                ?>
            </div>
            <div class="form-group col-md-4">
                <?= $form->field($model, 'Salario')->textInput() ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'fechaIngreso')->widget(
                        DatePicker::className(), [
                    // inline too, not bad
                    'inline' => false,
                    // modify template for custom rendering
                    //'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
                    'clientOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]);
                ?>
            </div>
            <div class="form-group col-md-4">
                <?=
                $form->field($model, 'Genero')->dropDownList(
                        /* ['maxlength' => true] */
                        ['Masculino' => 'Masculino', 'Femenino' => 'Femenino',], ['prompt' => 'Genero']
                )
                ?>
            </div>



            <div class="form-group">
                <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>
    </form>

bootstrap

asked by Sebastian Salazar 12.03.2018 в 21:35

source

2 answers

1

Make sure all your divs are closed, and you do not need to place more classes on your button if you only place it outside the form-row

Look at this replica of the same code in simple HTML

<form>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="Cedula">Cedula</label>
                <input type="text" name="cedula" class="form-control">
            </div>
            <div class="form-group col-md-4">            
                <label for="Nombre">Nombre</label>
                <input type="text" name="cedula" class="form-control">
            </div>
            <div class="form-group col-md-4">
                <label for="Apellido">Apellido</label>
                <input type="text" name="cedula" class="form-control">
            </div>
            <div class="form-group col-md-4">
                <label for="fecha">Fecha</label>
                <select name="fecha" id="tasking" class="form-control">
                    <option value="" selected>Seleccione fecha</option>
                    <option value="value1">value1</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="Municipio_idMunicipio">Municipio_idMunicipio</label>
                <select name="Municipio_idMunicipio" id="Municipio_idMunicipio" class="form-control">
                    <option value="" selected>Municipio_idMunicipio</option>
                    <option value="value">value</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="Area_idArea">Area_idArea</label>
                <select name="Area_idArea" id="Area_idArea" class="form-control">
                    <option value="" selected>Area_idArea</option>
                    <option value="value">value</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="Cargo_idCargo">Cargo_idCargo</label>
                <select name="Cargo_idCargo" id="Cargo_idCargo" class="form-control">
                    <option value="" selected>Cargo_idCargo</option>
                    <option value="value">value</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="Salario">Salario</label>
                <input type="text" name="cedula" class="form-control">
            </div>
            <div class="form-group col-md-4">
                <label for="fecha2">Fecha2</label>
                <select name="fecha" id="tasking" class="form-control" class="form-control">
                    <option value="" selected>Seleccione fecha</option>
                    <option value="value1">value1</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="Genero">Genero</label>
                <select name="Genero" id="Genero" class="form-control">
                    <option value="" selected>Genero</option>
                    <option value="value">value</option>
                </select>
            </div>
        </div> <!-- cierre de form-row -->
        <!-- dejo fuera a submit -->
        <div class="form-group">
            <input type="submit" value="Enviar" class="btn btn-success">
        </div>
    </form>

answered by 12.03.2018 в 22:23

How to capture a selected item from a combobox filled from a BD Select the value of the attribute with XSLT

score 0 · Accepted Answer

Specify that the div take the full width with col-lg-12

            <div class="form-group col-lg-12">
            <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>