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