Forms

BS4 theme forms is an enhancement of BS forms .

Getting started

To use BS4 modal simply include bs4 theme in your bundle file

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Input groups

BS input groups requires that the child of .input-group will be .input-group-append, .input-group-prepend or the .form-control / .custom-select itself. BS4 theme adds an option to place a wrapper .input-group-main for the .form-control / .custom-select, this wrapper is positioned relative and is mainly used for floating label

Number input

BS4 theme removes arrows entirely including the margin they create from number input (using css with ::-webkit-outer-spin-button, ::-webkit-inner-spin-button)

LTR fields

Some field's input is always LTR, for example an email which is always in English, another example is a phone number field.

Email ,Phone and number fields

Email, Phone and Number fields will have direction ltr already so nothing needs to be done

Don't use text-left in this cases

.text-left will change the placeholder and label position and we don't want that

Change to RTL

To really understand the behaviour change to RTL cause in LTR there is no visible change

.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =email_field_tag "floating-label-form-control-ltr-email", nil, class: 'form-control', placeholder: true
      =label_tag "floating-label-form-control-ltr-email", t('application.email', count: 1)
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =email_field_tag "fixed-floating-label-form-control-ltr-email", nil, class: 'form-control', placeholder: 'this is a placeholder'
      =label_tag "fixed-floating-label-form-control-ltr-email", t('application.email', count: 1)

.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =email_field_tag "invalid-floating-label-form-control-ltr-email", nil, class: 'form-control is-invalid', placeholder: true
      =label_tag "invalid-floating-label-form-control-ltr-email", t('application.email', count: 1)
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =email_field_tag "invalid-fixed-floating-label-form-control-ltr-email", nil, class: 'form-control is-invalid', placeholder: 'this is a placeholder'
      =label_tag "invalid-fixed-floating-label-form-control-ltr-email", t('application.email', count: 1)

On this page