FormGrid supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the FormGrid::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set FormGrid::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set FormGrid::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set FormGrid::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• model Model, or ActiveRecord, model instance extending from yii\base\Model or yii\db\ActiveRecord. This is mandatory.

• form ActiveForm, the ActiveForm instance extending from kartikorm\ActiveForm. You normally would call it as \$form = \kartikorm\ActiveForm::begin();. This is mandatory.

• formName string, the form name to be provided if not using with model and ActiveForm. One of form and model OR formName is mandatory.

• attributeDefaults array, the default settings that will be applied for all attributes. The array will be configured similar to a single attribute setting value in the \$attributes array. One will typically default markup and styling like type, container, prepend, append etc. For example:

  // settings for horizontal form used without active form
  'attributeDefaults' => [
      'type' => Form::INPUT_TEXT,
      'labelOptions' => ['class'=>'col-md-2'],
      'inputContainer' => ['class'=>'col-md-10'],
  ]
  

  Note: The settings at the \$attributes level will override these default settings.

• rows array, the most important part of your form grid builder configuration. This is mandatory. Each row (item) in this array, will be an array itself, that will consist of the widget properties required for the Form widget. Typically you can just pass the attributes for each row, and others can be defaulted from the FormGrid settings.

• columns integer, the number of columns in which to split the fields horizontally. If not set, defaults to 1 column. This property can be overridden at the rows configuration level for each row.

• autoGenerateColumns boolean, whether to auto calculate and generate the columns based on the count of attributes for each row. If not set, Defaults to true. If the count of attributes is > FormGrid::GRID_WIDTH (12) then no further columns will be generated. This property can be overridden at the rows configuration level for each row.

• columnSize string, the bootstrap device size for rendering each Bootstrap grid column. Applicable Defaults to `Form::SIZE_SMALL`. Can take in one of these options:

  • 'xs' or Form::SIZE_X_SMALL

  • 'sm' or Form::SIZE_SMALL

  • 'md' or Form::SIZE_MEDIUM

  • 'lg' or Form::SIZE_LARGE

  • 'xl' or Form::SIZE_X_LARGE

• columnOptions array, the HTML attributes for the grid columns. Applicable only if columns is greater than 1. The following special options are recognized:

  • colspan integer, the customized grid column span to use if you need assymmetric field columns in your layout. For the default bootstrap grid this is a number between 1 to 12.

• rowOptions integer, the HTML attributes for the grid rows. Applicable only if columns is greater than 1.

• options integer, the HTML attributes for the field/attributes container. The following options are additionally recognized:

  • tag: string, the HTML tag for the container. Defaults to fieldset.

Rendering a complex grid layout with FormGrid easily. In this you can have single, double or multi columns within the same form. You may also be planning to use various input types for your design and place as you want on your layouts. In order to achieve these, you can call the Form::widget multiple times with different settings as described below.

use kartik\form\ActiveForm;
use kartik\builder\Form;
use kartik\builder\FormGrid;
$form = ActiveForm::begin(['type'=>ActiveForm::TYPE_VERTICAL]);
echo FormGrid::widget([
    'model'=>$model,
    'form'=>$form,
    'autoGenerateColumns'=>true,
    'rows'=>[
        [
            'contentBefore'=>'<legend class="text-info"><small>Account Info</small></legend>',
            'attributes'=>[       // 2 column layout
                'username'=>['type'=>Form::INPUT_TEXT, 'options'=>['placeholder'=>'Enter username...']],
                'password'=>['type'=>Form::INPUT_PASSWORD, 'options'=>['placeholder'=>'Enter password...']],
            ]
        ],
        [
            'attributes'=>[       // 1 column layout
                'notes'=>['type'=>Form::INPUT_TEXTAREA, 'options'=>['placeholder'=>'Enter notes...']],
            ],
        ],
        [
            'contentBefore'=>'<legend class="text-info"><small>Profile Info</small></legend>',
            'columns'=>3,
            'autoGenerateColumns'=>false, // override columns setting
            'attributes'=>[       // colspan example with nested attributes
                'address_detail' => [ 
                    'label'=>'Address',
                    'labelOptions' => ['class' => 'is-required'], // displays the required asterisk
                    'columns'=>6,
                    'attributes'=>[
                        'address'=>[
                            'type'=>Form::INPUT_TEXT, 
                            'options'=>['placeholder'=>'Enter address...'],
                            'columnOptions'=>['colspan'=>3],
                        ],
                        'zip_code'=>[
                            'type'=>Form::INPUT_TEXT, 
                            'options'=>['placeholder'=>'Zip...'],
                            'columnOptions'=>['colspan'=>2],
                        ],
                        'phone'=>[
                            'type'=>Form::INPUT_TEXT, 
                            'options'=>['placeholder'=>'Phone...']
                        ],
                    ]
                ]
            ],
        ],
        [
            'attributes'=>[
                'birthday'=>['type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\widgets\DatePicker', 'hint'=>'Enter birthday (mm/dd/yyyy)'],
                'state_1'=>['type'=>Form::INPUT_DROPDOWN_LIST, 'items'=>$model->typeahead_data, 'hint'=>'Type and select state'],
                'color'=>['type'=>Form::INPUT_WIDGET, 'widgetClass'=>'\kartik\color\ColorInput', 'hint'=>'Choose your color'],
            ]
        ],
        [
            'attributes'=>[       // 3 column layout
                'rememberMe'=>[   // radio list
                    'type'=>Form::INPUT_RADIO_LIST, 
                    'items'=>[true=>'Yes', false=>'No'], 
                    'options'=>['inline'=>true]
                ],
                'brightness'=>[   // uses widget class with widget options
                    'type'=>Form::INPUT_WIDGET, 
                    'label'=>Html::label('Brightness (%)'), 
                    'widgetClass'=>'\kartik\range\RangeInput',
                    'options'=>['width'=>'80%']
                ],
                'actions'=>[    // embed raw HTML content
                    'type'=>Form::INPUT_RAW, 
                    'value'=>  '<div style="text-align: right; margin-top: 20px">' . 
                        Html::resetButton('Reset', ['class'=>'btn btn-secondary btn-default']) . ' ' .
                        Html::submitButton('Submit', ['class'=>'btn btn-primary']) . 
                        '</div>'
                ],
            ],
        ],
    ]
    ]
]);
ActiveForm::end();