I am trying to figure out how to customize the checkout form by changing classes because I want to stylize it with bootstrap instead of the default Magento styles. I don't see them defined anywhere and with my reading and looking at the Magento developer documentation it looks like they are dynamically generated http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_field.html But in that documentation it doesn't look like there is any way of adding custom classes to the wrapper elements or anything.
This is the default output for the First Name:
<div class="field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" name="billingAddresscheckmo.firstname">
<label class="label" data-bind="attr: { for: element.uid }" for="DPGHTAP">
<!-- ko if: element.label -->
<span data-bind="text: element.label">First Name</span>
<!-- /ko -->
</label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl -->
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="firstname" placeholder="" aria-describedby="notice-DPGHTAP" id="DPGHTAP">
<!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() --><!-- /ko -->
<!-- ko if: element.tooltip --><!-- /ko -->
<!-- ko if: element.notice --><!-- /ko -->
<!-- ko if: element.error() --><!-- /ko -->
<!-- ko if: element.warn() --><!-- /ko -->
</div>
</div>
I would prefer to have an output similar to this:
<div class="form-group field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" name="billingAddresscheckmo.firstname">
<label class="label" data-bind="attr: { for: element.uid }" for="DPGHTAP">
<!-- ko if: element.label -->
<span data-bind="text: element.label">First Name</span>
<!-- /ko -->
</label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl -->
<input class="form-control input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="firstname" placeholder="" aria-describedby="notice-DPGHTAP" id="DPGHTAP">
<!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() --><!-- /ko -->
<!-- ko if: element.tooltip --><!-- /ko -->
<!-- ko if: element.notice --><!-- /ko -->
<!-- ko if: element.error() --><!-- /ko -->
<!-- ko if: element.warn() --><!-- /ko -->
</div>
</div>
Notice how there is now a form-group and form-control class added.
How does one accomplish this if everything is dynamically generated?
