Bootstrap Forms

Bootstrap Forms is a parent theme that is based upon the core 'stable' theme.

Bootstrap Library Installation

You will need to install the bootstrap-sass library into the /libraries folder of your drupal installation. You can download the library here.

Theme Installation

If you are using your own subtheme then be sure to set bootstrap_forms as the base theme e.g.

core: 8.x
base theme: bootstrap_forms

Alternatively I have provided an example subtheme that has the scss files setup to import bootstrap's scss files in the correct order allowing its variables to be overridden easily.

1. Copy over the starterkit from the`bootstrap_forms/starterkit/example` directory into your site's `themes` directory.
2. Rename the folder to a unique machine readable name. e.g. mysubtheme
3. Rename `./mysubtheme/example.starterkit.yml` to match your new theme name and change starterkit.yml to info.yml

Usage

All form elements can be controled via the attributes below, alternatively you can use the bootstrap_forms_ui module to control individual entities form element layouts.

Properties

Use the list below to jump to the required property definition.

#form_type, #title_grid, #element_grid, #title_tooltip, #suffix_tooltip, #prefix_tooltip, #element_columns, #form_type_wrapper, #form_group_wrapper, #form_field_wrapper, #element_inline

#form_type

Used by: All elements

Description: Specify the type of form to be used for the element see http://getbootstrap.com/css/#forms

Values: 'basic', 'horizontal', 'inline'

#title_grid / #element_grid

Used by: All elements

Description: Allows the developer full control to set the grid classes for a field's LABEL and a field's INPUT ELEMENT respectively as per http://getbootstrap.com/css/#grid

Usage Example:

   $form['example_textfield'] = array(
         '#title' => t('Example'),
         '#form_type' => 'horizontal',
         '#title_grid' => array(
             'columns' => array(
                 'md' => 3
             ),
         );
         '#element_grid' => array(
             'columns' => array(
                 'md' => 9
             ),
         );
   );

#title_grid['columns'] / #element_grid['columns']

Description: Specify the column class to apply to the title/element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['offset'] / #element_grid['offset']

Description: Specify the amount of columns to indent/offset the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['push'] / #element_grid['push']

Description: Specify the ordering of the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['pull'] / #element_grid['pull']

Description: Specify the ordering of the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#form_type_wrapper

Used by: All elements

Description: By default form elements have a wrapper element with a class denoting the type of form being rendered i.e. 'form-inline', 'form-horizontal' or 'form-basic'. This property allows this wrapper to be excluded from the markup completely.

Values: TRUE, FALSE

#form_group_wrapper

Used by: All elements

Description: By default form elements have a wrapper element with a class of .form-group this property allows you to exclude it if required.

Values: TRUE, FALSE

#form_field_wrapper

Used by: All elements

Description: By default form elements have a field wrapper that contains all of drupal's default filed classes, this property allows that wrapper to be excluded.

Values: TRUE, FALSE

#prefix_tooltip

Used by: All elements

Description: Prepend tooltip to the input element

Usage Example:

    $form['contact'] = array(
        '#title' => t('Contact name'),
        '#prefix_tooltip' => t('This is a prefix tooltip'),
    );

#suffix_tooltip

Used by: Textfield

Description: Append a tooltip to the input element

Usage Example:

    $form['contact'] = array(
        '#title' => t('Contact name'),
        '#suffix_tooltip' => t('This is a suffix tooltip'),
    );

#element_columns

Used by: checkboxes, radios

Description: Use to arrange checkboxes in multiple columns in horizontal form types.

Usage Example:

    $form['checkboxes'] = array(
        '#title' => t('Checkboxes'),
        '#form_type' => 'horizontal',
        '#title_grid' => array(
             'columns' => array(
                'md' => '4'
            ),
        ),
        '#element_grid' =>  array(
             'columns' => array(
                'md' => '8'
            ),
        ),
        '#element_columns' => 3,       
    );