How to layout yii2 form fields side by side

Question

I would like to place form fields in Yii2 side by side, in a 2x2 grid.

I'm using the bootstrap/ActiveForm as such

    <?php $form = ActiveForm::begin([
    'layout' => 'horizontal',
    'action' => ['index'],
    'method' => 'get',
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-4',
        ],
    ],
]); ?>

The fields are basically a series of date widgets

<?= $form->field($model, 'saleFrom')->widget(DatePicker::className(), [
    'options' => ['placeholder' => 'TO'],
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'yyyy-mm-dd'
    ]
]); ?>

However all that has managed to do is align all four fields to the left of the div - i can't figure out from the documentation how to use the Yii2 options to do this without having to manually add custom css.

Answer 1

All you need is to wrap your form columns in another bootstrap row.

<?php $form = ActiveForm::begin([
    'layout' => 'horizontal',
    'action' => ['index'],
    'method' => 'get',
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-4',
        ],
    ],
]); ?>
    <div class="row">
        <div class="col-md-6">
            <?= $form->field($model, 'firstname') ?>
            <?= $form->field($model, 'lastname') ?>
       </div>
        <div class="col-md-6">
            <?= $form->field($model, 'email') ?>
            <?= $form->field($model, 'bla') ?>
       </div>
    </div>
<?php ActiveForm::end() ?>