Theming a form input to use an external bootstrap library

I have come across a js/css library that extends bootstrap to incorporate some custom input controls. Therefore, I want to be able to extend the default checkboxes generated by drupal 8 to take on the markup and therefore the styling. See footer for link to the bootstrap extension library.

I need to be able to change the markup generated from drupal:

<div class="field--type-boolean field--name-field-newsletter field--widget-boolean-checkbox form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-field-newsletter-wrapper" id="edit-field-newsletter-wrapper">  <!-- THEME DEBUG --> <!-- THEME HOOK: 'form_element' --> <!-- BEGIN OUTPUT from 'themes/bootstrap/templates/input/form-element.html.twig' --> <div class="form-item js-form-item form-type-checkbox js-form-type-checkbox form-item-field-newsletter-value js-form-item-field-newsletter-value checkbox">  <!-- THEME DEBUG --> <!-- THEME HOOK: 'form_element_label' --> <!-- BEGIN OUTPUT from 'themes/bootstrap/templates/input/form-element-label.html.twig' --> <label for="edit-field-newsletter-value" title="" data-toggle="tooltip" class="control-label option" data-original-title="">  <!-- THEME DEBUG --> <!-- THEME HOOK: 'input__checkbox' --> <!-- FILE NAME SUGGESTIONS:    * input--checkbox.html.twig    x input.html.twig --> <!-- BEGIN OUTPUT from 'themes/bootstrap/templates/input/input.html.twig' --> <input data-drupal-selector="edit-field-newsletter-value" class="form-checkbox" type="checkbox" id="edit-field-newsletter-value" name="field_newsletter[value]" value="1"> <!-- END OUTPUT from 'themes/bootstrap/templates/input/input.html.twig' -->  I'd like to receive newsletter</label> <!-- END OUTPUT from 'themes/bootstrap/templates/input/form-element-label.html.twig' -->   </div>    <!-- END OUTPUT from 'themes/bootstrap/templates/input/form-element.html.twig' --> </div> 

To adapt the markup of:

<input type="checkbox" class="chkbox chkbox-default" id="chk-default"><label for="chk-default">Default</label> 

I have 2 options, one to create a template called input--checkbox.html.twig that overrides input--form-control.html.twig, even though from what I've noticed, extending this template isn't sufficient as I need to remove the label that wraps this input. Has anyone any suggestions of how I can achieve it down this route despite the roadblock?

The other option would be to use a pre process on the form to alter the surrounding markup?

Can anyone advise me on the best way to achieve this?

Thanks in advance.

Here is the Bootstrap-Extend library


Category: theming Time: 2016-07-28 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.187 (s). 12 q(s)