Loading...
Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

Bootstrap4 Migration

Follow the next migration steps in order to migrate to Bootstrap 4.

  1. Label CSS classes

    Old:

    css {
        class {
            label = control-label
        }
    }

    New:

    css {
        class {
            label = col-form-label
        }
    }
  2. Fieldset without row class

    Old:

    <fieldset class="{fieldset.css.class.fieldset}" style="{fieldset.css.style.fieldset}">
    ...
    </fieldset>
    fieldset.css.class.fieldset = row

    New:

    <fieldset class="{fieldset.css.class.fieldset}" style="{fieldset.css.style.fieldset}">
        <div class="{fieldset.css.class.fieldsetInner}" style="{fieldset.css.style.fieldsetInner}">
        ...
        </div>
    </fieldset>
    fieldset.css.class.fieldset = 
    fieldset.css.class.fieldsetInner = row
  3. Input groups

    Old:

    <span class="input-group-addon">
        <i class="{field.css.class.icon.calendar}"></i>
    </span>

    New:

    <div class="input-group-append">
        <div class="input-group-text">
            <i class="{field.css.class.icon.calendar}"></i>
        </div>
    </div>
  4. Checkboxes

    Old:

    <label for="form-{formUid}-{fieldsetKey}-{fieldKey}">
        <f:form.checkbox value="{field.value}"
                         name="form-{formUid}-{fieldsetKey}-{fieldKey}" id="form-{formUid}-{fieldsetKey}-{fieldKey}"
                         class="{field.css.class.field}" style="{field.css.style.field}" /> 
        <span class="{field.css.class.notice}" style="{field.css.style.notice}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-notice"><f:format.raw>{field.notice}</f:format.raw></span>
        <span class="{field.css.class.message}" style="{field.css.style.message}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-message"></span>
    </label>

    New:

    <div class="{field.css.class.fieldWrapper}" style="{field.css.style.fieldWrapper}">
        <f:form.checkbox value="{field.value}"
                         name="form-{formUid}-{fieldsetKey}-{fieldKey}" id="form-{formUid}-{fieldsetKey}-{fieldKey}"
                         class="{field.css.class.field}" style="{field.css.style.field}" />
        <label class="{field.css.class.checkboxLabel}" style="{field.css.style.checkboxLabel}" for="form-{formUid}-{fieldsetKey}-{fieldKey}">
            <f:format.raw>{field.checkboxLabel}</f:format.raw>
        </label>
        <span class="{field.css.class.notice}" style="{field.css.style.notice}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-notice"><f:format.raw>{field.notice}</f:format.raw></span>
        <span class="{field.css.class.message}" style="{field.css.style.message}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-message"></span>
    </div>
  5. Help-Text

    Old:

    <span class="{field.css.class.notice}" style="{field.css.style.notice}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-notice"><f:format.raw>{field.notice}</f:format.raw></span>
    css.class.notice = help-block

    New:

    <small class="{field.css.class.notice}" style="{field.css.style.notice}" id="form-{formUid}-{fieldsetKey}-{fieldKey}-notice"><f:format.raw>{field.notice}</f:format.raw></small>
    css.class.notice = form-text

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
JF9_________APQ______
N______1____J_1___3TS
NQH___IP4___5_F______
__P____M____J_A___OHG
C5R_________JEC______